Czyszczenie <input type = 'file' /> przy użyciu jQuery

Czy można wyczyścić <input type='file' />wartość kontrolną za pomocą jQuery? Próbowałem następujące:

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

Ale to nie działa.

Łatwe: owijasz element <form>wokół, wywołujesz reset formularza, a następnie usuwasz go za pomocą .unwrap(). W przeciwieństwie do .clone()innych rozwiązań w tym wątku, na końcu znajduje się ten sam element (w tym właściwości niestandardowe, które zostały w nim ustawione).

Testowane i działające w Opera, Firefox, Safari, Chrome i IE6 +. Działa również na innych typach elementów formularza, z wyjątkiem 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

Jak zauważa Timo poniżej, jeśli masz przyciski do wyzerowania pola wewnątrz <form>, musisz wywołać .preventDefault()zdarzenie, aby uniemożliwić <button>wysłanie.

EDYTOWAĆ

Nie działa w IE 11 z powodu nierozwiązanego błędu. Tekst (nazwa pliku) jest kasowany na wejściu, ale jego Filelista pozostaje zapełniona.

Szybka odpowiedź: wymień ją.

W poniższym kodzie używam replaceWithmetody jQuery, aby zastąpić kontrolę klonem samego siebie. W przypadku, gdy masz jakiekolwiek procedury obsługi powiązane ze zdarzeniami w tym elemencie sterującym, my też chcemy je zachować. Aby to zrobić, przekazujemy truejako pierwszy parametr clonemetody.

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

var control = $("#control");

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

Fiddle: http://jsfiddle.net/jonathansampson/dAQVM/

Jeśli klonowanie, zachowując procedury obsługi zdarzeń, stwarza wszelkie problemy, które można rozważyć przy użyciu delegowania zdarzeń do obsługi kliknięć tej kontrolki z elementu nadrzędnego:

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

Zapobiega to konieczności klonowania procedur obsługi wraz z elementem podczas odświeżania formantu.

Jquery ma zająć się problemami związanymi z przeglądarkami / starszymi przeglądarkami.

Działa to na nowoczesnych testowanych przeze mnie przeglądarkach: Chromium v25, Firefox v20, Opera v12.14

Korzystanie z jquery 1.9.1

HTML

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

Jquery

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

Na jsfiddle

Poniższe rozwiązanie javascript również działało dla mnie w wymienionych wyżej przeglądarkach.

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

Na jsfiddle

Nie mam możliwości przetestowania za pomocą IE, ale teoretycznie powinno to działać. Jeśli IE różni się na tyle, że wersja Javascript nie działa, ponieważ MS zrobiło to w inny sposób, moim zdaniem metoda jquery powinna sobie z tym poradzić, w przeciwnym razie warto wskazać to zespołowi jquery wraz z metoda wymagana przez IE. (Widzę ludzi mówiących: „to nie zadziała w IE”, ale nie ma javascript waniliowy, aby pokazać, jak to działa w IE (podobno „funkcja bezpieczeństwa”?)), Być może zgłosi to jako błąd do MS (jeśli by to zrobili licz to jako takie), aby naprawić w dowolnej nowszej wersji)

Jak wspomniano w innej odpowiedzi, post na forum jquery

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

Ale jquery usunęło teraz obsługę testowania przeglądarki, jquery.browser.

To rozwiązanie javascript również działało dla mnie, jest to waniliowy odpowiednik metody jquery.replaceWith .

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

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

Na jsfiddle

Należy zauważyć, że metoda cloneNode nie zachowuje powiązanych programów obsługi zdarzeń.

Zobacz ten przykład.

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

Na jsfiddle

Ale jquery.clone oferuje to ^{[* 1]}

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

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

    fileopen.replaceWith(clone);
});

Na jsfiddle

^{[* 1]} jquery jest w stanie to zrobić, jeśli zdarzenia zostały dodane metodami jquery, ponieważ zachowuje kopię w jquery.data , nie działa inaczej, więc jest to trochę oszustwo / obejście i oznacza, że ​​rzeczy nie są kompatybilny między różnymi metodami lub bibliotekami.

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

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

    fileopen.replaceWith(clone);
});

Na jsfiddle

Nie można pobrać dołączonej procedury obsługi zdarzeń bezpośrednio z samego elementu.

Oto ogólna zasada w javascript waniliowym, w ten sposób jquery i inne biblioteki robią to (z grubsza).

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

Na jsfiddle

Oczywiście jquery i inne biblioteki mają wszystkie inne metody wsparcia wymagane do prowadzenia takiej listy, to tylko demonstracja.

Z oczywistych względów bezpieczeństwa nie można ustawić wartości wejściowego pliku, nawet pustego ciągu.

Wszystko, co musisz zrobić, to zresetować formularz, w którym pole lub jeśli chcesz tylko zresetować dane wejściowe pliku formularza zawierającego inne pola, użyj tego:

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

Oto przykład: http://jsfiddle.net/v2SZJ/1/

To działa dla mnie.

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

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

Mam nadzieję, że to pomoże.

W IE8 zmieniono pole Przesyłanie plików tylko do odczytu dla bezpieczeństwa. Zobacz post na blogu zespołu IE :

Historycznie kontrola przesyłania plików HTML () była źródłem znacznej liczby luk w ujawnianiu informacji. Aby rozwiązać te problemy, wprowadzono dwie zmiany w zachowaniu kontrolki.

Aby zablokować ataki polegające na „kradzieży” naciśnięć klawiszy i ukradkiem nakłonić użytkownika do wpisania lokalnej ścieżki pliku do formantu, pole edycji Ścieżka pliku jest teraz tylko do odczytu. Użytkownik musi jawnie wybrać plik do przesłania za pomocą okna dialogowego Przeglądaj pliki.

Dodatkowo dla parametru „Uwzględnij ścieżkę katalogu lokalnego podczas przesyłania plików” ustawiono opcję „Wyłącz” dla strefy internetowej. Ta zmiana zapobiega wyciekom potencjalnie wrażliwych informacji lokalnego systemu plików do Internetu. Na przykład zamiast przesyłać pełną ścieżkę C: \ users \ ericlaw \ Document \ secret \ image.png, Internet Explorer 8 prześle teraz tylko nazwę pliku image.png.

$("#control").val('')to wszystko czego potrzebujesz! Testowane w Chrome przy użyciu JQuery 1.11

Inni użytkownicy testowali również w Firefoksie.

Utknąłem ze wszystkimi opcjami tutaj. Oto zrobiony przeze mnie hack, który zadziałał:

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

i możesz uruchomić reset za pomocą jQuery z kodem podobnym do tego:

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

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

Skończyło się na tym:

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

może nie jest to najbardziej eleganckie rozwiązanie, ale działa, o ile wiem.

Użyłem https://github.com/malsup/form/blob/master/jquery.form.js , który ma funkcję o nazwieclearInputs() crossbrowser, dobrze przetestowana, łatwa w użyciu i obsługuje również problemy z IE oraz usuwanie ukrytych pól Jeśli potrzebne. Być może trochę długie rozwiązanie, aby wyczyścić tylko dane wejściowe pliku, ale jeśli masz do czynienia z przesyłaniem plików crossbrowser, to rozwiązanie jest zalecane.

Użycie jest łatwe:

// Wyczyść wszystkie pola plików:
$ („input: file”). clearInputs ();

// Wyczyść również ukryte pola:
$ („input: file”). clearInputs (true);

// Wyczyść określone pola:
$ („# myfilefield1, # ​​myfilefield2”). clearInputs ();

/ **
 * Czyści wybrane elementy formularza.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: kolor | data | data / godzina | email | miesiąc | numer | hasło | zakres | wyszukiwanie | tel | tekst | czas | adres URL | tydzień) $ / i; // „ukryty” nie ma na tej liście
    zwróć to. każdy (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        w przeciwnym razie, jeśli (t == „pole wyboru” || t == „radio”) {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == „plik”) {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } else {
                $ (this) .val ('');
            }
        }
        else if (includeHidden) {
            // includeHidden może być wartością true lub może być łańcuchem selektora
            // wskazanie specjalnego testu; na przykład:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // powyższe wyczyści ukryte dane wejściowe, które mają klasę „specjalnych”
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

Wartość danych wejściowych pliku jest tylko do odczytu (ze względów bezpieczeństwa). Nie można go programowo wyczyścić (inaczej niż poprzez wywołanie metody reset () formularza, który ma szerszy zakres niż tylko to pole).

Udało mi się uruchomić mój przy użyciu następującego kodu:

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

Szukałem prostego i czystego sposobu na wyczyszczenie danych wejściowych do pliku HTML, powyższe odpowiedzi są świetne, ale żadna z nich tak naprawdę nie odpowiada temu, czego szukam, dopóki nie natknąłem się na Internet z prostym, eleganckim sposobem:

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

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

wszystkie podziękowania należą się Chrisowi Coyierowi .

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

Ta .clone()rzecz nie działa w Operze (i ewentualnie innych). Zachowuje treść.

Najbliższą dla mnie metodą była wcześniejsza metoda Jonathana, jednak upewnienie się, że pole zachowało swoją nazwę, klasy itp. Stworzyło niechlujny kod w moim przypadku.

Coś takiego może działać dobrze (również dzięki Quentin):

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

Udało mi się to uruchomić za pomocą następujących ...

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

Zostało to przetestowane w IE10, FF, Chrome i Opera.

Istnieją dwa zastrzeżenia ...

1. Nadal nie działa poprawnie w FF, jeśli odświeżysz stronę, element pliku zostanie ponownie wypełniony wybranym plikiem. Skąd czerpię te informacje, jestem poza mną. Co jeszcze związane z elementem wejściowym pliku mogę spróbować usunąć?

2. Pamiętaj, aby używać delegowania we wszystkich zdarzeniach, które zostały dołączone do elementu wejściowego pliku, aby nadal działały po utworzeniu klonu.

Nie rozumiem jednak, kto na świecie myślał, że niedopuszczenie do wyczyszczenia pola wejściowego z nieprawidłowego niedopuszczalnego wyboru pliku było dobrym pomysłem?

OK, nie pozwól mi dynamicznie ustawiać wartości, aby nie można było ługować plików z systemu operacyjnego użytkownika, ale pozwól mi wyczyścić niepoprawny wybór bez resetowania całego formularza.

To nie jest tak, że „akceptuj” robi coś innego niż filtr, aw IE10 nawet nie rozumie typów mimów MS Word, to żart!

Na moim Firefoksie 40.0.3 działa tylko z tym

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

działa dla mnie w każdej przeglądarce.

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

Wypróbowałem większość technik wymienionych przez użytkowników, ale żadna z nich nie działała we wszystkich przeglądarkach. tj .: clone () nie działa w FF dla danych wejściowych pliku. Skończyło się na ręcznym skopiowaniu pliku wejściowego, a następnie zastąpieniu oryginału skopiowanym. Działa we wszystkich przeglądarkach.

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

Działa to z Chrome, FF i Safari

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

Może nie współpracować z IE lub Operą

Ustaw go jako asynchroniczny i zresetuj po wykonaniu żądanych działań przycisku.

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

nie działa mi:

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

więc w asp mvc używam funkcji maszynki do golenia do zamiany danych wejściowych pliku. najpierw utwórz zmienną dla ciągu wejściowego o Id i Nazwa, a następnie użyj jej do wyświetlenia na stronie i zastąpienia przycisku resetowania:

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

@attachmentInput

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

Prostym sposobem jest zmiana typu wejścia i zmiana go z powrotem.

Coś takiego:

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

Możesz zastąpić go takim klonem

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

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

Ale to klonuje też swoją wartość, więc lepiej to zrobić

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

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

To łatwe lol (działa we wszystkich przeglądarkach [oprócz opery]):

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

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

Co? W funkcji sprawdzania poprawności po prostu wstaw

document.onlyform.upload.value="";

Zakładając, że przesyłanie to nazwa:

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

Używam JSP, nie jestem pewien, czy to robi różnicę ...

Działa dla mnie i myślę, że jest o wiele łatwiej.