Непоследовательное поведение браузера Edge с обнаружением выбора файла $ (": file"). Unbind () - PullRequest
Новая
       7

Непоследовательное поведение браузера Edge с обнаружением выбора файла $ (": file"). Unbind ()

0 голосов
/ 30 января 2019

У меня есть кнопка, которая вызывает входной файл и открывает браузер файлов, чтобы выбрать файл.Как только файл выбран, я выполняю определенные операции.

Проблема:

Он отлично работает на 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>

Есть идеи как это исправить?

1 Ответ

0 голосов
/ 31 января 2019

Я до сих пор не уверен, каковы были ваши намерения использовать 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>

Редактировать.Вот пример использования «хака» для удаленного использования файлового ввода.Это не нормальное поведение, как упомянуто в сообщении, которое я связал , но вы можете увидеть, как это будет работать для удаленного использования файлового ввода:

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;
}
...