Вопрос по html, file-io, jquery, javascript – клиринг <input type='file' /> используя jQuery

523

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

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

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

Ваш Ответ

26   ответов
2

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

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-1

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-4

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));
Error: User Rate Limit Exceeded
-1

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

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

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

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

$('#control').replacewith(clone);
0
$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());
Error: User Rate Limit Exceeded
5

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0
function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

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

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

document.onlyform.upload.value="";

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

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

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

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

Error: User Rate Limit Exceeded
8

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
4

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

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

Нечто подобное может работать хорошо (спасибо Квентину тоже):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
102

что 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 и другие библиотеки имеют все другие методы поддержки, необходимые для поддержки такого списка, это просто демонстрация.

Error: User Rate Limit Exceeded.val('')Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.val("")Error: User Rate Limit Exceeded
12

который я сделал, который работал:

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

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

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

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

Error: User Rate Limit Exceeded
0

$('#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>
5

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

одного файла, даже в пустую строку.

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

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

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

Error: User Rate Limit Exceededjsfiddle.net/9uPh5/2
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
427

В приведенном ниже коде я использую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);

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

Error: User Rate Limit Exceededstackoverflow.com/a/13351234/909944
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
4

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

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>

20

безопасности. УвидетьСообщение в блоге команды IE:

Historically, the HTML File Upload Control () has been the source of a significant number of information disclosure vulnerabilities. To resolve these issues, two changes were made to the behavior of the control.

To block attacks that rely on “stealing” keystrokes to surreptitiously trick the user into typing a local file path into the control, the File Path edit box is now read-only. The user must explicitly select a file for upload using the File Browse dialog.

Additionally, the “Include local directory path when uploading files” URLAction has been set to "Disable" for the Internet Zone. This change prevents leakage of potentially sensitive local file-system information to the Internet. For instance, rather than submitting the full path C:\users\ericlaw\documents\secret\image.png, Internet Explorer 8 will now submit only the filename image.png.

8

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

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

// Clear all file fields:
$("input:file").clearInputs();

// Clear also hidden fields:
$("input:file").clearInputs(true);

// Clear specific fields:
$("#myfilefield1,#myfilefield2").clearInputs();
/**
 * Clears the selected form elements.
 */
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $(this).replaceWith($(this).clone(true));
            } else {
                $(this).val('');
            }
        }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            //  $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) )
                this.value = '';
        }
    });
};
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededoutput.jsbin.com/roxumiduka
Error: User Rate Limit Exceeded
514

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

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

http://jsfiddle.net/rPaZQ/

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

  // Prevent form submission
  e.stopPropagation();
  e.preventDefault();
}

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

Edit

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededreset()Error: User Rate Limit Exceededreset2()Error: User Rate Limit Exceededreset()Error: User Rate Limit Exceeded<button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>Error: User Rate Limit Exceededjsfiddle.net/rPaZQ/23.
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 & amp; Opera.

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

Still doesn't work properly in FF, if you refresh the page, the file element gets re-populated with the selected file. Where it is getting this info from is beyond me. What else related to a file input element could I possible try to clear?

Remember to use delegation on any events you had attached to the file input element, so they still work when the clone is made.

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

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

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

Error: User Rate Limit Exceeded.pop()Error: User Rate Limit Exceeded
43

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

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

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

Error: User Rate Limit Exceeded
1

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

как нужные действия кнопки были выполнены.

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

Похожие вопросы