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

549

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.

Maistrenko Vitalii
źródło

Odpowiedzi:

529

Ł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.

poślizgnąć się
źródło
14
Zwycięzca! Działa w każdej przeglądarce i unika klonowania pola wejściowego. Ale jeśli jasne przyciski są w formie, zmień nazwę reset()na np. reset2(), ponieważ przynajmniej w Chrome wszystkie pola są wyczyszczone, jeśli tak jest reset(). I dodaj event.preventDefault () po wyczyszczeniu wywołania, aby zapobiec przesłaniu. W ten sposób: <button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>. Przykład roboczy: jsfiddle.net/rPaZQ/23 .
Timo Kähkönen
28
Problem w tym, że przynajmniej tymczasowo powoduje to, że dokument jest nieważny. (Formularze nie mogą zawierać innych formularzy.) Niezależnie od tego, czy obecnie działa, czy nie, możesz go złamać w dowolnym momencie.
cHao
6
@ cHao, oczywiście jest to prawdą tylko wtedy, gdy element wejściowy jest rzeczywiście w formie, a nie musi tak być.
Ninjakannon,
7
Jeśli chodzi o posiadanie formularza w formularzu, zawsze możesz utworzyć nowy element formularza poza DOM lub dołączyć go do treści, jeśli chcesz, a następnie przenieść element wejściowy do tego formularza. Następnie zresetujesz ten nowy formularz, przeniesiesz element wejściowy z powrotem do miejsca, w którym był i usuniesz dodatkowy element formularza.
Kevin Heidt,
4
Właśnie odkryłem, że to nie działa w IE 11. Używamy PixelFileInput - który wykorzystuje to podejście. Podczas gdy tekst i miniatura są czyszczone, lista plików obiektu pozostaje taka sama :(
Ian Grainger
434

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.

Jonathan Sampson
źródło
50
Możesz także użyć metody .clone () w polu $ ('# clone'). ReplaceWith ($ (this) .clone ());
metryczny152
4
Po prostu nic nie robi - bez błędów w firebug. Musiałem dodać control.val (''); aby wyczyścić pole wprowadzania pliku. Twój kod działał w Chrome i ie9, jak to jest.
mnsr,
10
To wciąż nie działa. Należy go wyczyścić przed wymianą. Więc chciałbyś .val () przed .replaceWith (). Więc byłoby control.val (''). ReplaceWith (...);
mnsr
6
Mam poniżej rozwiązanie, które jest znacznie czystsze niż to: stackoverflow.com/a/13351234/909944
slipheed
2
ta odpowiedź jest tutaj z powodów historycznych. obsługa nowoczesnych przeglądarekinput.value = null;
André Werlang
113

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.

Xotic750
źródło
To działa! (a przynajmniej bit waniliowy JS na początku tej odpowiedzi). Przetestowałem to w najnowszych przeglądarkach Chrome, Firefox i IE (11).
PhilT
4
Chciałem dodać niektóre z tych samych odpowiedzi, ale głównie to .val(''). Czy nie jest to po prostu prostsze niż klonowanie elementu wysyłania lub dodawanie zagnieżdżonego formularza? +1.
Erenor Paz,
3
Pierwsze rozwiązanie (użycie .val("")) JQuery działało idealnie, dzięki. Znacznie prostsze niż klonowanie danych wejściowych i ich zastępowanie.
Hugo Zink
51

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/

Laurent
źródło
6
Nie działa poprawnie w IE. Wartość wizualna jest resetowana, ale wartość el. Nadal zgłasza poprzednią wersję. Pomaga zresetować wartość el., Ale tylko w IE10 +. jsfiddle.net/9uPh5/2
gregor
2
Takie
2
To źle, nie możemy ustawić pola na określoną wartość, ale mam nadzieję, że możemy to wyczyścić.
fralbo
44

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.

Błąd składni
źródło
1
Pracuje dla mnie! Warto zauważyć, że jeśli jakieś detektory zdarzeń są wyzwalane przez zmianę danych wejściowych pliku, musisz je ponownie przypisać po wymianie danych wejściowych.
JCollerton
20

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.

Jon Galloway
źródło
16

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

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

Bodi
źródło
2
Jak wyjaśnia wiele innych postów tutaj, nie jest to przyjazne dla różnych przeglądarek.
Tisch
Dla mojego zrozumienia, które przeglądarki to zawodzi?
TheHamstring
1
Nie działa w programie Internet Explorer, ponieważ plik typu danych wejściowych jest tylko do odczytu w IE>
Lucky
4
Działa w Chrome i Firefox. Więcej niż trzeba.
naimul64
12

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

Saneem
źródło
3
ok, ale wyczyści całą formę. Nieokreślone dane wejściowe pliku
Ashish Ratan
8

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.

skvalen
źródło
nie działa w chrome 34 (linux). Metoda replaceWith () działa w obu przeglądarkach (chrome, firefox)
Gaurav Sharma
Na początku muszę zauważyć „$ .browser został usunięty z jquery 1.9”, ale ostatnie dwa wiersze (Zmiana atrybutu typu na tekst, a następnie ustawienie go z powrotem do pliku) działały. Dodatkowo próbowałem ustawić $ ('# control'). Val (''); lub w javascript document.getElementById (control) .value = ''; i też pracowaliśmy i nie wiem, dlaczego nie powinniśmy stosować tego podejścia !? W końcu zdecydowałem się użyć obu z nich.
QMaster,
8

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 = '';
        }
    });
};
Timo Kähkönen
źródło
Nie rozumiem, dlaczego ta odpowiedź nie jest bardziej pozytywna ?!
AlexB,
1
@AlexB: Ponieważ, jak wyjaśnił Timo, przesada tylko wyczyścić jedno pole wejściowe pliku.
TheCarver
Nie wiem, czy to zadziałało, ale już nie działa na FF 45.0.2 :(
fralbo
5

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

Quentin
źródło
16
Jestem zdezorientowany - próbowałem $ („# inputControl”). Val („”) i rzeczywiście to pole zostało puste. Czy coś brakuje?
Sampson,
1
@Jonathan, też dla mnie działa, ale jeśli ustawisz na cokolwiek innego, jest to błąd bezpieczeństwa. Testowane w FF4.
Brenden
reset () jest rodzimą metodą JS, więc jeśli wybierzesz formularz za pomocą jQuery, musisz usunąć element z zakresu jQuery. $ („form # myForm”) [0] .reset ();
Chris Stephens
4
@Jonathan To działa dla ciebie, ponieważ nie zrobiłeś tego w IE. Ten problem bezpieczeństwa jest czymś, co zatrzymuje tylko IE. Czyszczenie wartości regularnie działa zarówno w przeglądarce Chrome, jak i Firefox, ale nie w IE
VoidKing
5

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

var input = $("#control");    
input.replaceWith(input.val('').clone(true));
Purusartha
źródło
5

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>

chebaby
źródło
4

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)
}
SpoonNZ
źródło
Czy zostało to przetestowane we wszystkich głównych przeglądarkach?
Shawn
Wygląda na to, że działa dobrze w najnowszej wersji Chrome / FF / Opera i IE8. Nie widzę żadnego powodu, dla którego to by nie działało - opcja resetowania formularzy jest już od dawna.
SpoonNZ
4

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!

1DMF
źródło
To prawie działa. Jedyną rzeczą, którą musisz zrobić, aby działała w Firefoksie, jest użycie .pop()tablicy plików zamiast ustawienia wartości null. wydaje się, że poprawnie wyczyściło to plik.
kmacdonald
2

Na moim Firefoksie 40.0.3 działa tylko z tym

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));
Roger Russel
źródło
1
$ ('input [type = file]'). replaceWith ($ ('input [type = file]'). clone (true) .val (''));
Andrei
2

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);
        }
srsajid
źródło
1

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);
Juan
źródło
0

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());
Niraj
źródło
1
Cześć Niraj. Witamy. Ta odpowiedź może być poprawna, ale może zawierać wyjaśnienia.
tomfanning
0

Działa to z Chrome, FF i Safari

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

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

Wilhelm
źródło
1
Wygląda prawie identycznie jak sam problem w OP
Trindaz
1
nie jest standardem ecmascript, wartość pliku typu wejściowego jest właściwością ochrony ze względów bezpieczeństwa.
e-info128
0

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>
JEPAAB
źródło
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() );
}
Claudio Guirunas
źródło
0

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>
Omid-RH
źródło
0

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')
AbdessamadEL
źródło
-1

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);
G'ofur N.
źródło
-4

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/

Anonimowy
źródło
Nie obchodzi mnie mniej opera. Po prostu zawiń go w formularzu, jeśli ci zależy. Osobiście mnie to nie obchodzi i użyję mojej metody.
Anonimowy
2
To wcale nie jest dobra odpowiedź, ale głównym problemem było naprawdę złe podejście
Sam P
-5

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.

Erica B.
źródło