Очистка поля загрузки HTML-файла с помощью JavaScript

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

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

В общем, что я хочу, это что-то вроде (псевдо-код):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;
14 52
javascript html jquery file-upload

14 ответов:

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

учитывая форму, как:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

прямой путь DOM:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

простой способ DOM. Это может не работать в старых браузерах, которые не любят входные файлы:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

путь jQuery:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

сброс всей формы через jQuery: https://stackoverflow.com/a/13351234/1091947

72

просто теперь в 2014 году элемент ввода, имеющий идентификатор, поддерживает функцию val('').

для ввода -

<input type="file" multiple="true" id="File1" name="choose-file" />

этот js очищает входной элемент -

$("#File1").val('');
45

Да, элемент upload защищен от прямых манипуляций в разных браузерах. Однако вы можете удалить элемент из дерева DOM, а затем вставить новый на его место с помощью JavaScript. Это даст вам тот же результат.

что-то вроде:

$('#container-element').html('<input id="upload-file" type="file"/>');
8

код, который я использовал, был,

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

спасибо всем за советы и ссылки!

5

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

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>
4

очень нравится держать вещи простыми, вроде этого :)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');
4

простое решение:

document.getElementById("upload-files").value = "";
3

короче version это работает идеально для меня, что следующим образом:

document.querySelector('#fileUpload').value = "";
3

этот jQuery работал для меня в IE11, Chrome 53 и Firefox 49:

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);
3

попробуйте это его работа отлично 

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;
2

для совместимости, когда ajax недоступен, установите .val (") или он повторно отправит последний загруженный ajax-файл, который все еще присутствует во входных данных. Следующее должно правильно очистить вход при сохранении .на() события:

var input = $("input[type='file']");
input.html(input.html()).val('');
2

попробуйте этот код...

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());
1

jQuery протестированный метод работает нормально в FF & Chrome:

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});
1

Если у вас есть следующие:

<input type="file" id="FileSelect">

потом просто сделать:

$("#FileSelect").val('');

для сброса или очистки последнего выбранного файла.

1