jak zresetować <typ wejścia = „plik”>

400

Tworzę aplikację metra z VS2012 i Javascript

Chcę zresetować zawartość mojego pliku wejściowego:

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

Jak mam to zrobić?

Jezus
źródło
1
Co rozumiesz przez treść?
Maess,
3
masz na myśli, że po wybraniu pliku przez użytkownika chcesz zresetować wybrany plik do „nic”?
ddavison,
9
Możliwy duplikat stackoverflow.com/questions/1043957/…
Dhaval Marthak 12.12.2013
14
to wydaje się , że prosty inputElement.value = ""załatwia sprawę w porządku, bez uciekania się do klonowania lub pakowania, jak sugeruje. Działa w CH (46), IE (11) i FF (41)
Robert Koritnik

Odpowiedzi:

371

Rozwiązanie jQuery, które @ dhaval-marthak opublikował w komentarzach, oczywiście działa, ale jeśli spojrzysz na rzeczywiste wywołanie jQuery, łatwo jest zobaczyć, co robi jQuery, ustawiając valueatrybut na pusty ciąg. W „czystym” JavaScript byłoby to:

document.getElementById("uploadCaptureInputFile").value = "";
Jordan Kasper
źródło
15
Dzięki! Jeśli mimo to masz już odwołanie do jquery, $ input.val („”) będzie działać jak zwykle.
Natan
@ 2ndGAB Hmm ... Mam tylko 45.0.1, więc nie mogę przetestować ... nikogo innego?
Jordan Kasper
@ 2ndGAB Correction, Mój Firefox właśnie zaktualizował się do wersji 46.0.1 i ten kod nadal tam działa. Czy możesz potwierdzić?
Jordan Kasper
@ jakerella, co jest dziwne, dla mnie ustawienie wartości wyboru pliku wejściowego wyzwala wyjątek bezpieczeństwa. Jedynym rozwiązaniem, które z powodzeniem $(#myfileselector).trigger('fileselect', [1, ""]);
stosuję,
3
input.type = ''; input.type = 'file'; // enjoy
Maxmaxmaximus
81

Trzeba zawinąć <input type = “file”>do <form>tagów, a następnie można zresetować wejście przez zresetowanie postać:

onClick="this.form.reset()"
levkaster
źródło
7
To jest poprawna metoda. Działa we wszystkich przeglądarkach i nie koliduje z żadnymi zabezpieczeniami, które są implementowane przez przeglądarki, aby zapobiec nieuporządkowanym skryptom z błędami wartości wejściowej pliku.
Eugene Ryabtsev
9
Trochę fajnie, ale nie dla mnie, ponieważ resetuje również inne pola w tym formularzu.
Starwave,
2
Podobne mogłoby być rozwiązanie jQuery $("form").get(0).reset();. .get(0)Powróci rzeczywisty element formularza, dzięki czemu można korzystać z reset()funkcji.
teewuane
74

To jest NAJLEPSZE rozwiązanie:

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

Ze wszystkich odpowiedzi tutaj jest to najszybsze rozwiązanie. Bez klonowania danych, bez resetowania formularza!

Sprawdziłem to we wszystkich przeglądarkach (ma nawet obsługę IE8).

Maxmaxmaximus
źródło
4
Czy jest jakiś konkretny powód, aby zresetować input.type? Ustawienie samej wartości ''daje oczekiwany wynik.
Harshita Sethi
Czy wywołuje onchangezdarzenie w MS Edge?
hotohoto
@hotohoto, nie wiem, mam Mac OS)
Maxmaxmaximus
1
To wymaga jeszcze kilku pozytywnych opinii lub czegoś takiego, zbyt długo zajęło mi znalezienie tej odpowiedzi, jest to jedyna, którą znalazłem, która działa w IE.
sch
input.value = '' zgłasza wyjątek dla konsoli w IE11. Jednak resetowanie input.type działa we wszystkich przeglądarkach bez żadnego błędu.
Miroslav Jasso,
45

Jeśli masz następujące rzeczy:

<input type="file" id="fileControl">

następnie po prostu wykonaj:

$("#fileControl").val('');

zresetować kontrolę pliku.

sstauross
źródło
6
Najlepsze rozwiązanie IMHO.
Serhii Maksymchuk
3
Lub użyj DOM:inputFileEl.value = '';
Ninh Pham
44

Możesz po prostu sklonować go i zastąpić go sobą, z dołączonymi wszystkimi wydarzeniami:

<input type="file" id="control">

i

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

Dzięki: Css-tricks.com

pixparker
źródło
1
Niestety nie resetuje to wartości wejściowej, zobacz ten jsFiddle . Aby uzyskać lepsze rozwiązanie, zobacz tę odpowiedź .
Gyrocode.com,
1
@ Gyrocode.com Ten jsFiddle nie działa, jeśli obraz zostanie przesłany po raz drugi po zresetowaniu.
Sarthak Singhal
2
@SarthakSinghal, Niestety napisałeś zły kod, powinieneś był zrobić jsfiddle.net/cL1LooLe
Roger Russel
2
@RogerRussel: Dokładnie ... Zastanawiałem się, dlaczego górne odpowiedzi mówiły, że działa tylko raz, co jest wyraźnym wskaźnikiem utraty jakiegoś odniesienia. Tak było w rzeczywistości, ponieważ początkowo utworzono odwołanie wejściowe, które później zastąpiono nowym elementem wejściowym.
Robert Koritnik
1
Zresetowanie tego samego valuew innych odpowiedziach wydaje się znacznie prostsze niż manipulowanie DOM.
CodeFinity
40

Inne rozwiązanie (bez wybierania elementów HTML DOM)

Jeśli dodałeś detektor zdarzeń „zmień” na tym wejściu, to w kodzie javascript możesz wywołać (dla określonych warunków):

event.target.value = '';

Na przykład w HTML:

<input type="file" onChange="onChangeFunction(event)">

I w javascript:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }
zrośnięty
źródło
Kolejny sposób na angular2: stackoverflow.com/questions/40165271/…
Belter,
Działa to tylko w przypadku nazw plików, które zawierają tylko jeden .przed rozszerzeniem pliku.
Ma Kobi,
Zgadza się, edytowałem kod i zapewniłem bardziej uniwersalne podejście do uzyskania rozszerzenia pliku.
zrewanżowano
31

ROZWIĄZANIE

Poniższy kod działał dla mnie z jQuery. Działa w każdej przeglądarce i pozwala zachować zdarzenia i niestandardowe właściwości.

var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

PRÓBNY

Zobacz jsFiddle dla kodu i demonstracji.

SPINKI DO MANKIETÓW

Aby uzyskać więcej informacji, zobacz Jak zresetować dane wejściowe pliku za pomocą JavaScript .

Gyrocode.com
źródło
1
@alessadro, nie, po prostu element <input type="file">o określonym identyfikatorze.
Gyrocode.com,
Dzięki, wyjaśnij swoją odpowiedź :) +1
candlejack
1
To najczystsze i najbardziej zgodne z przeglądarką rozwiązanie, jakie do tej pory znalazłem - dziękuję.
Pat
25

Zresetowanie przycisku przesyłania pliku jest tak proste, używając czystego JavaScript !

Jest kilka sposobów, aby to zrobić, ale koniecznym prostym sposobem, który działa dobrze w wielu przeglądarkach, jest zmiana wartości zarchiwizowanej na nic, w ten sposób zresetowane zostanie przesłanie pliku, spróbuj też użyć czystego javascript zamiast jakiegokolwiek frameworka, stworzyłem kod poniżej, po prostu sprawdź to (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}
<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

Alireza
źródło
jak zrobić z jquery
Anand Choudhary
1
@AnandChoudhary działa to również wewnątrz jQuery, ale możesz zastąpić const file = document.querySelector ('. File'); z const file = $ ('. file'); lub po prostu zrób $ („. file”). val („”); opróżnić
Alireza
18

Szczególnie dla Angulara

document.getElementById('uploadFile').value = "";

Będzie działać, ale jeśli użyjesz Angular, powiesz, że „wartość właściwości” nie istnieje dla typu „HTMLElement”.

document.getElementById () zwraca typ HTMLElement, który nie zawiera właściwości value. Więc wrzuć to do HTMLInputElement

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

DODATKOWE: -

Nie powinniśmy jednak używać manipulacji DOM (document.xyz ()) w środowisku kątowym.

Aby to zrobić, zapewniono @VIewChild, @ViewChildren itp., Które są odpowiednio document.querySelector (), document.queryselectorAll ().

Nawet ja tego nie przeczytałem. Lepiej śledzić blogi ekspertów

Przejdź przez ten link1 , link2

P Satish Patro
źródło
Cieszę się, że nie muszę używać kątownika!
user2677034
Nie. Będzie tam FIx. Tylko ja to znalazłem. Z którego wtedy korzystasz?
P Satish Patro,
Przepraszam, byłem sarkastyczny ... Po prostu używam document.getElementById ('uploadFile'). Value = ""; ponieważ nie używam kątowej.
user2677034
Niezłe. Myślałem tak samo, ale używaj Angular / React / VUe. Są to potężne ramy dla routingu, komponentu, usługi i manipulacji domem nadpisujące implementację
P Satish Patro,
14

Używam dla vuejs

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''
anson
źródło
2
Dzięki stary! Myślałem, że nigdy nie znajdę rozwiązania z vuejs: D, zwariowałeś na mój dzień!
Zsoca,
1
Działa jak urok! Dziękuję
F KIng
8

Plik wejściowy resetu jest bardzo pojedynczy

$('input[type=file]').val(null);

Jeśli powiążesz, zresetuj plik i zmień inne pole formularza lub załaduj formularz za pomocą ajax.

Ten przykład ma zastosowanie

selektorem jest na przykład $('input[type=text]')dowolny element formularza

wydarzenie click , changelub jakiekolwiek zdarzenie

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});
Ivan Fretes
źródło
5

W IE 10 rozwiązałem problem z:

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

gdzie :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>
Alvaro Joao
źródło
5

document.getElementById("uploadCaptureInputFile").value = "";

Jalaleddin Hosseini
źródło
5

Istnieje wiele podejść i zasugeruję pójście z referencją do wejścia.

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

wyczyścić wartość po przesłaniu.

this.fileInput.value = "";
Sourabh Bhutani
źródło
4

Po prostu użyj:

$('input[type=file]').val('');
deepak shinde
źródło
4

Za pomocą kątownika można utworzyć zmienną szablonu i ustawić wartość na null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

Lub możesz utworzyć metodę resetowania w ten sposób

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

szablon

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

demo Stackblitz

malbarmavi
źródło
2

Nie można go zresetować, ponieważ jest to plik tylko do odczytu. możesz go sklonować, aby obejść problem.

Ducaz035
źródło
2

Powinieneś spróbować:

$("#uploadCaptureInputFile").val('');
Muhammad Awais
źródło
2

Można to zrobić w ten sposób

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function(){
inputfile.replaceWith(inputfile.val('').clone(true));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>

Fraz Abbas
źródło
2

Moje najlepsze rozwiązanie

$(".file_uplaod_input").val('');  // this is working best ):
Abdelhakim Ezzahraoui
źródło
Czym różni się to od pierwszej odpowiedzi i komentarzy do tej odpowiedzi?
Akin Okegbile,
1

Rozwiązanie jQuery:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });
panatoni
źródło
Rozważ wypełnienie tej odpowiedzi, aby wyjaśnić, jak to działa.
Błędy
@ Błędy zgadują, że to mówi samo za siebie. Po uruchomieniu on changezdarzenia wejściowego pliku wartość zostaje wyczyszczona. Typ danych wejściowych jest resetowany z none do file.
2
@Jordy tak, wiem, co robi :) Pomyślałem tylko, że przy kilkunastu innych odpowiedziach warto spróbować je wyróżnić. Pojawił się podczas recenzowania. Mogą w rzeczywistości skopiować Twój komentarz, aby jeszcze bardziej go rozwinąć. Zawsze warto spróbować wyjaśnić, dlaczego według ciebie kod rozwiązuje problem PO.
Błędy
1

Napotkałem problem z przesyłaniem plików ng2 dla Angulara. jeśli szukasz rozwiązania kątowego, zapoznaj się z poniższym kodem

HTML:

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

składnik

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('activeFrameinputFile ')InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {

`this.`**InputFrameVariable**`.nativeElement.value = '';`

};

Javascriptsoldier
źródło
1
<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function(){
$("p").click(function(){

            $("#mfile").val('');
            return false;

    });
});

w.Daya
źródło
Chociaż ten kod może rozwiązać pytanie, w tym wyjaśnienie, w jaki sposób i dlaczego to rozwiązuje problem, naprawdę pomógłby poprawić jakość twojego postu i prawdopodobnie doprowadziłby do większej liczby głosów. Pamiętaj, że odpowiadasz na pytanie dla czytelników w przyszłości, nie tylko dla osoby zadającej teraz pytanie. Proszę edytować swoje odpowiedzi, aby dodać wyjaśnień i dać wskazówkę co zastosować ograniczenia i założenia. Z recenzji
podwójny dźwięk
0

Jeśli masz kilka plików w formularzu, ale chcesz tylko zresetować jeden z nich:

jeśli używasz boostrap, jquery, filestyle do wyświetlenia formularza pliku wejściowego:

$("#"+idInput).filestyle('clear');
użytkownik6087223
źródło
0
var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));
Kld
źródło
0

Działa również w przypadku kontroli dynamicznych.

JavaScript

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});
Arun Prasad ES
źródło
0

function resetImageField() {
    var $el = $('#uploadCaptureInputFile');                                        
    $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>

Md. Abu Bakker Siddique
źródło