Очистка поля ввода файлов в Internet Explorer

Question

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

Следующее работает в Firefox, но не в IE (текст остается там).Есть ли обходной путь для этого?

$("#clear").click( function() {
    $("#attachment").val("");
    //document.myform.attachment.value = "";
})

HTML:

<form name="myform">
    <input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>

jsFiddle

Answer 1

Одно решение, которое я нашел, просто делает:

document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;

Похоже, это не должно работать, но оно работает.

Answer 2

Это решение более элегантно, чем клонирование элемента ввода. Вы оборачиваете <form> вокруг элемента, вызываете reset на форме, а затем удаляете форму с помощью unwrap (). В отличие от решений clone (), приведенных выше, в конце вы получите один и тот же элемент (включая настраиваемые свойства, установленные для него).

Протестировано и работает в Opera, Firefox, Safari, Chrome и IE6 +. Также работает с другими типами элементов формы, за исключением type = "hidden".

http://jsfiddle.net/rPaZQ/

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}​

Answer 3

Это доступно только для IE8 и далее , поэтому вы не можете его очистить.Самый простой способ обойти эту функцию безопасности - заменить элемент копией.

Редактировать Найден предыдущий ответ на этот вопрос, который предлагает тот же подход! Выемкаиспользуя jQuery

Answer 4

Это сработало для меня:

 $("input[type='file']").replaceWith($("input[type='file']").clone(true));

Answer 5

используйте простой JavaScript:

formname.reset();

См. Демонстрацию: http://jsfiddle.net/rathoreahsan/YEeGR/

Answer 6

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

Включите этот скрипт:

 <script>
 function clearFileInputField(tagId) {
 document.getElementById(tagId).innerHTML =
    document.getElementById(tagId).innerHTML;
}
</script>

Измените HTML на этот:

<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`

Answer 7

Используйте старомодный <input type="reset" value="clear this">