Почему IE не загружает поле ввода файла?

Question

Я изменил свою текущую форму, чтобы вызвать отправку формы после того, как пользователь выберет файл для загрузки. По завершении загрузки я звоню:

$('#file').val(''); 

, чтобы сбросить поле ввода файла.

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

Это работает на Chrome, FF и Safari, но не работает в IE. Есть ли обходное решение или лучшее решение для IE?

Answer 1

Вы не можете изменить значение типа ввода файла, так как это приведет к уязвимости безопасности. Вместо этого просто замените ввод файла на новый. Вместо $('#file').val(''), сделайте следующее:

$('#file').replaceWith('<input name="file" type="file" id="file"/>'); 

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

$(document).ready(function() { 
    var empty_input = $('#file').clone(); 

    $('#the-form').on('change', '#file', function(el) { 
     $('#the-form').submit(); // assuming the target is a hidden iframe 
     $(this).replaceWith(empty_input.clone()); 
    }); 
}) 

Обратите внимание, что я использую делегированную версию jQuery.on() поэтому событие все равно будет работать на новом входе сразу же после его заменить.