Очистка <input type = 'file' /> с помощью jQuery

Question

Можно ли очистить управляющее значение <input type='file' /> с помощью jQuery? Я пробовал следующее:

$('#control').attr({ value: '' }); 

Но это не работает.

Answer 1

Значение файловых входов доступно только для чтения (по соображениям безопасности). Вы не можете очистить его программно (кроме вызова метода reset () формы, которая имеет более широкую область, чем просто это поле).

Answer 2

Я искал простой и понятный способ очистки ввода HTML-файла, приведенные выше ответы великолепны, но ни один из них на самом деле не отвечает на то, что я ищу, пока я не наткнулся в Интернете на простой и элегантный способ сделай это:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

все кредиты идут на Крис Койер .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

Answer 3

Мне удалось заставить мой работать со следующим кодом:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

Answer 4

Мне удалось заставить это работать, используя следующее ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

Это было проверено в IE10, FF, Chrome & Opera.

Есть две оговорки ...

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

2. Не забудьте использовать делегирование для любых событий, которые вы прикрепили к элементу ввода файла, поэтому они будут работать и после создания клона.

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

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

Это не то, что 'accept' делает что-то кроме фильтра, в любом случае, в IE10 он даже не понимает типы пантомимы MS Word, это шутка!

Answer 5

.clone() вещь не работает в Opera (и, возможно, других). Содержит содержание.

Самым близким методом для меня здесь был Джонатан ранее, однако в моём случае было гарантировано, что поле сохранило свое имя, классы и т. Д., Для грязного кода.

Что-то вроде этого может работать хорошо (спасибо Квентину тоже):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Answer 6

На моем Firefox 40.0.3 работать только с этим

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

Answer 7

это работает для меня в каждом браузере.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Answer 8

Я пробовал большинство методов, упомянутых пользователями, но ни один из них не работал во всех браузерах. То есть: clone () не работает в FF для ввода файлов. В итоге я вручную скопировал входной файл, а затем заменил оригинал скопированным. Работает во всех браузерах.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

Answer 9

Вы можете заменить его на клон, например,

var clone = $('#control').clone();

$('#control').replacewith(clone);

Но это тоже клоны со своей ценностью, чтобы вам было лучше

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

Answer 10

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}