Блог

Главная - Вопросы по программированию - загрузка файла html в edge / internet Explorer

загрузка файла html в edge / internet Explorer

#html #internet-explorer #microsoft-edge

#HTML #internet-explorer #microsoft-edge

Вопрос:

Нет ли рабочего способа загрузить файл из edge / internet Explorer? Я использую следующее на своем сайте для тега ввода html:

 <label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

Когда вы нажимаете «Добавить», появляется окно «Открыть файл», но в консоли ничего не возвращается (см. Код javascript ниже). Этот код отлично работает в Chrome и без проблем отображает результаты в консоли.

 $('#userfile').on('input', function() {
    var test_test = $('#userfile')[0].files[0];
    console.log($('#userfile')[0].files[0]);
}

Ответ №1:

Основываясь на результатах моего тестирования, я обнаружил, что on input не работает в IE и Edge.

введите описание изображения здесь

вы можете попробовать заменить при вводе на при изменении. Он может работать с IE и Edge.

Обратите внимание, что событие chnage будет выполняться только при изменении ввода файла. Если пользователь выберет тот же файл, он не запустит его.

Другая вещь, которую я заметил, что метка для не работает для IE. Итак, в IE вам нужно сделать видимым ввод HTML-файла и щелкнуть по нему, чтобы выполнить код.

Измененный код:

 <!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function(){
	
		$("#userfile").on("change", function() {
    			var test_test = $('#userfile')[0].files[0];
    			console.log($('#userfile')[0].files[0]);
		});

	});
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Вывод в IE 11:

введите описание изображения здесь

Вывод в MS Edge:

введите описание изображения здесь

вы можете попытаться найти какой-либо обходной путь для метки для или вы можете просто добавить дополнительную кнопку и попытаться выполнить код при нажатии на эту кнопку, это может помочь вам решить проблему.

Комментарии:

1. Осознавал все, что вы упомянули, прежде чем я прочитал ваш ответ, лол. Это позор, потому что мне нужны эти вещи

Ответ №2:

Любой, кто хочет использовать пользовательскую кнопку, чтобы входной файл работал в большинстве браузеров, пожалуйста, взгляните на этот JS fiddle. Это именно то, что мне было нужно.

JS FIDDLE

 <div class="file-input-wrapper">
  <button class="btn-file-input">Mah Custom Uploadz Button</button>
  <input type="file" name="file" />
</div>

В итоге я изменил ширину и высоту и сделал кнопку очень маленькой, чтобы она не занимала много места на моем сайте. Надеюсь, это кому-то поможет.