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

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

Следующее работает в 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

Ответы

Ответ 1

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

Изменить. Нашел предыдущий ответ на этот вопрос, который предлагает тот же подход! Очистка < input type = 'file'/ > используя jQuery

Ответ 2

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

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

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

Ответ 3

Это решение более элегантно, чем клонирование элемента ввода. Вы оберните <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();
}

Ответ 4

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

formname.reset();

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

Ответ 5

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

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

Ответ 6

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

Включите этот script:

 <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>`

Ответ 7

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