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

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

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

Как отмечает Тимо ниже, если у вас есть кнопки для запуска сброса поля внутри <form>, вы должны вызвать .preventDefault()событие, чтобы предотвратить <button>запуск отправки.

РЕДАКТИРОВАТЬ

Не работает в IE 11 из-за нефиксированной ошибки. Текст (имя файла) очищается на входе, но его Fileсписок остается заполненным.

Быстрый ответ: замени его.

В приведенном ниже коде я использую replaceWithметод jQuery, чтобы заменить элемент управления своим клоном. Если у вас есть какие-либо обработчики, связанные с событиями в этом элементе управления, мы также хотим сохранить их. Для этого мы передаем в trueкачестве первого параметра cloneметода.

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Скрипка: http://jsfiddle.net/jonathansampson/dAQVM/

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

$("form").on("focus", "#control", doStuff);

Это предотвращает необходимость клонирования любых обработчиков вместе с элементом при обновлении элемента управления.

Предполагается, что Jquery позаботится о проблемах между браузерами и браузерами.

Это работает на современных браузерах, которые я тестировал: Chromium v25, Firefox v20, Opera v12.14

Использование jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

На jsfiddle

Следующее решение javascript также работало для меня в браузерах, упомянутых выше.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

На jsfiddle

У меня нет способа проверить с IE, но теоретически это должно работать. Если IE отличается настолько, что версия Javascript не работает, потому что MS сделала это по-другому, метод jquery должен, на мой взгляд, решить эту проблему за вас, иначе стоило бы указать это команде jquery вместе с метод, который требуется IE. (Я вижу людей, которые говорят «это не сработает в IE», но нет ванильного javascript, чтобы показать, как он работает в IE (предположительно, «функция безопасности»?)), Возможно, сообщите об этом также как об ошибке в MS (если они посчитайте это так), чтобы он исправлялся в любом новом выпуске)

Как упомянуто в другом ответе, сообщении на форуме jquery

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Но jquery теперь удалил поддержку тестирования браузера, jquery.browser.

Это решение javascript также сработало для меня, оно является ванильным эквивалентом метода jquery.replaceWith .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

На jsfiddle

Важно отметить, что метод cloneNode не сохраняет связанные обработчики событий.

Смотрите этот пример.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

На jsfiddle

Но jquery.clone предлагает это ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

На jsfiddle

^{[* 1]} jquery может сделать это, если события были добавлены методами jquery, поскольку он хранит копию в jquery.data , в противном случае он не работает, поэтому это немного обманывает / обходной путь и означает, что вещи не совместимы между различными методами или библиотеками.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

На jsfiddle

Вы не можете получить прикрепленный обработчик событий непосредственно от самого элемента.

Вот общий принцип в vanilla javascript, это то, как jquery делают все остальные библиотеки (примерно).

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

На jsfiddle

Конечно, jquery и другие библиотеки имеют все другие методы поддержки, необходимые для поддержки такого списка, это просто демонстрация.

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

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

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

Вот пример: http://jsfiddle.net/v2SZJ/1/

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

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Надеюсь, поможет.

В IE8 они сделали поле загрузки файла доступным только для чтения для безопасности. Смотрите сообщение в блоге команды IE :

Исторически HTML Control Upload File () был источником значительного числа уязвимостей раскрытия информации. Чтобы решить эти проблемы, в поведение элемента управления были внесены два изменения.

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

Кроме того, для URLAction для параметра «Включить путь к локальному каталогу при загрузке файлов» было установлено значение «Отключить» для зоны Интернета. Это изменение предотвращает утечку потенциально важной информации локальной файловой системы в Интернет. Например, вместо того, чтобы указывать полный путь C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 теперь будет отправлять только имя файла image.png.

$("#control").val('')это все, что тебе нужно! Протестировано на Chrome с использованием JQuery 1.11

Другие пользователи также протестировали в Firefox.

Я застрял со всеми вариантами здесь. Вот взлом, который я сделал, который работал:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

и вы можете запустить сброс, используя jQuery с кодом, подобным следующему:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )

Я закончил с этим:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

возможно, не самое элегантное решение, но оно работает, насколько я могу судить.

Я использовал https://github.com/malsup/form/blob/master/jquery.form.js , у которого есть вызываемая функция clearInputs(), которая является кроссбраузерной, хорошо протестирована, проста в использовании и обрабатывает также проблемы с IE и очистку скрытых полей. если нужно. Может быть, немного длинное решение, чтобы очистить только ввод файла, но если вы имеете дело с загрузкой файлов через браузер, то это решение рекомендуется.

Использование легко:

// Очистить все поля файла:
$ ( "Вход: файл") clearInputs ();.

// Очистить также скрытые поля:
$ ( "Входной файл":) clearInputs (истина);.

// Очистить определенные поля:
$ ( "# Myfilefield1, # ​​myfilefield2") clearInputs ().

/ **
 * Очищает выбранные элементы формы.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: цвет | дата | дата / время | электронная почта | месяц | номер | пароль | диапазон | поиск | тел. | текст | время | url | неделя) $ / i; // скрытого нет в этом списке
    вернуть this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        иначе если (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        еще если (tag == 'select') {
            this.selectedIndex = -1;
        }
        иначе если (t == "файл") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (Это) .replaceWith ($ (это) .clone (истина));
            } еще {
                $ (Это) .val ( '');
            }
        }
        еще если (includeHidden) {
            // includeHidden может быть значением true или строкой селектора
            // указание специального теста; например:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // выше будет очищать скрытые входы, которые имеют класс 'special'
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

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

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

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

Я искал простой и понятный способ очистки ввода 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>

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

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

Примерно так может сработать (спасибо Квентину тоже):

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

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

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, это шутка!

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

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

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

        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);
        }

Я пробовал большинство методов, упомянутых пользователями, но ни один из них не работал во всех браузерах. то есть: 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);

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

Это работает с Chrome, FF и Safari

$("#control").val("")

Может не работать с IE или Opera

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

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

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

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

у меня не работает:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

поэтому в asp mvc я использую бритвенные функции для замены файлового ввода. сначала создайте переменную для входной строки с Id и Name, а затем используйте ее для отображения на странице и замены при нажатии кнопки сброса:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Самый простой способ - изменить тип входа и снова изменить его.

Что-то вроде этого:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Вы можете заменить его своим клоном так

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

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

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

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

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

Это легко, lol (работает во всех браузерах [кроме оперы]):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS Fiddle: http://jsfiddle.net/cw84x/1/

Какая? В вашей функции проверки просто поместите

document.onlyform.upload.value="";

Предполагается, что загрузка это имя:

<input type="file" name="upload" id="csv_doc"/>

Я использую JSP, не уверен, что это имеет значение ...

У меня работает, и я думаю, что это намного проще.