Javascript 如何在剑道UI编辑器中创建浏览文件按钮

我正在尝试在剑道UI编辑器上创建一个具有浏览文件功能的自定义按钮

我的工具栏中有一行：

{
 name: "Add",
 template: '<a class="k-button" id="popupbutton"   onclick=" events.toolbar_click(\'theFile\')">Command</a><input type="file" id="theFile" hidden/> ',
}

---

有两种方法可以做到这一点。第一个是一个自定义模板，就像您的设置一样。但是，我不确定什么是“事件.工具栏\单击”。以下是如何让它工作：

方法1

<script>
          function performClick(elemId) {
              var elem = document.getElementById(elemId);
              if(elem && document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, false);
                elem.dispatchEvent(evt);
              }
          }

          $(document).ready(function() {
              $("#toolbar").kendoToolBar({
                  items: [
                    { name: "Add", type: "button",
                      text: "File", template: '<a class="k-button" id="popupbutton" onclick="performClick(\'theFile\')">File Command 1</a><input type="file" id="theFile" hidden/> '} ]
              });
          });
</script>

功能performClick（elemId）{
var elem=document.getElementById（elemId）；
if（elem&&document.createEvent）{
var evt=document.createEvent（“MouseEvents”）；
evt.initEvent（“单击”，真，假）；
要素调度事件（evt）；
}
}
$（文档）.ready（函数（）{
$（“#工具栏”）.kendoToolBar({
项目：[
{名称：“添加”，键入：“按钮”，
text:“File”，template:“
很好的示例！我想我的问题搞错了。它实际上不是一个工具栏，而是一个剑道UI编辑器。隐藏参数在编辑器上对我不起作用。如果我显示：none，var elem=document.getElementById（elemId）返回undefined，因为它看不到输入表单。你不能将输入元素放在剑道编辑器之外吗？我刚才确实这样做了，并用JQuery隐藏了它。现在就做这个工作。谢谢
<input type="file" id="theFile" hidden/>
<script>
          function fileClickEventHandler(){
            performClick('theFile')
          }

          function performClick(elemId) {
              var elem = document.getElementById(elemId);
              if(elem && document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, false);
                elem.dispatchEvent(evt);
              }
          }

          $(document).ready(function() {
              $("#toolbar").kendoToolBar({
                  items: [
                      { type: "button", text: "File Command 2", click: fileClickEventHandler },
                  ]
              });
          });
</script>