javascript - 边缘浏览器与检测文件选择不一致的行为 $ (":file").unbind()

Question

我有一个按钮可以触发输入文件并打开文件浏览器来选择文件。选择文件后，我将运行某些操作。

问题:

它在 Chrome 上运行良好，但 Microsoft Edge 的行为不一致。根据我的经验，前几次尝试(1,2 次或 3 次)它没有转到下面的这个功能，但在那之后它运行良好。

$(":file").unbind().change(function () {console.log("file selected");
...
...
}

下面的代码正是我用来针对 Chrome 和 Microsoft Edge 进行测试的代码

		function  toolbar_click(){
	   var elem = document.getElementById("myFile");
                var count = 0;
                if (elem && document.createEvent) {

                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", true, false);
                    elem.dispatchEvent(evt);
                }
               

                // dataSource.add({ ProductName: "New Product" });
                $(":file").unbind().change(function () {
					console.log("file selected");
                    if (count < 1) {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            //reader.onload = editViewModel.addFile();

                            reader.readAsDataURL(this.files[0]);
                             
                            //$('#showfilenames').append(this.files[0].name + '</br>');
                        }
                    }
 

                });
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="myFile"  style="display:none" >
  
</body>
<button class="k-button" id="insertAttachment" onclick="toolbar_click()"   > Click to choose file </button>

有什么解决办法吗？

Answer 1

我仍然不确定您使用 onclick 处理文件的意图是什么，但我建议让 html 文件输入处理与文件有关的所有内容。如果您只想打印出所有附加的文件名，那么您可以为此使用一个单独的函数。让我知道我是否理解您要对下面的示例执行的操作。

$(function(){
  $('#myFile').change(function() {
    var files = $(this)[0].files;
    var addList = "";
    for (i = 0; i < files.length; i++){
      addList += "<p>" + files[i].name + "</p>";
    }
    $('#fileSummary').html(addList);
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="/home/uploadfiles" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="myFile" multiple />
    <br>
    <input type="submit" name="submit" value="Submit" />
</form>

<hr>
<div>
  <label>Files Inlcuded:</label>
  <br>
  <span id="fileSummary"></span>
</div>

编辑。这是使用“hack”远程使用文件输入的示例。这不是 the post I linked 中提到的正常行为，但您可以看到这将如何远程使用文件输入:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="remoteClick">Remote File use</button>

<br>
<hr>

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

Javascript:

$(function(){
  $('#remoteClick').click(function(){
    $('#fileinput').trigger('click'); 
  }); 
});

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}