загрузка файла в формате HTML в Edge / Internet Explorer - PullRequest
Новая
       18

загрузка файла в формате HTML в Edge / Internet Explorer

0 голосов
/ 28 марта 2019

Нет ли рабочего метода для загрузки файла из 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]);
}

Ответы [ 2 ]

1 голос
/ 29 марта 2019

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

enter image description here

Вы можете попробовать заменить на входе на при изменении . Может работать с 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:

enter image description here

Вывод в MS Edge:

enter image description here

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

0 голосов
/ 29 марта 2019

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

JS FIDDLE 

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

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

...