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ć?
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ć?
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)Odpowiedzi:
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
value
atrybut na pusty ciąg. W „czystym” JavaScript byłoby to:źródło
$(#myfileselector).trigger('fileselect', [1, ""]);
Trzeba zawinąć
<input type = “file”>
do<form>
tagów, a następnie można zresetować wejście przez zresetowanie postać:źródło
$("form").get(0).reset();
..get(0)
Powróci rzeczywisty element formularza, dzięki czemu można korzystać zreset()
funkcji.To jest NAJLEPSZE rozwiązanie:
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).
źródło
input.type
? Ustawienie samej wartości''
daje oczekiwany wynik.onchange
zdarzenie w MS Edge?Jeśli masz następujące rzeczy:
następnie po prostu wykonaj:
zresetować kontrolę pliku.
źródło
inputFileEl.value = '';
Możesz po prostu sklonować go i zastąpić go sobą, z dołączonymi wszystkimi wydarzeniami:
i
Dzięki: Css-tricks.com
źródło
value
w innych odpowiedziach wydaje się znacznie prostsze niż manipulowanie DOM.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):
Na przykład w HTML:
I w javascript:
źródło
.
przed rozszerzeniem pliku.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.
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 .
źródło
<input type="file">
o określonym identyfikatorze.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):
źródło
Szczególnie dla Angulara
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
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
źródło
Używam dla vuejs
źródło
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 formularzawydarzenie
click
,change
lub jakiekolwiek zdarzenieźródło
W IE 10 rozwiązałem problem z:
gdzie :
źródło
źródło
Istnieje wiele podejść i zasugeruję pójście z referencją do wejścia.
wyczyścić wartość po przesłaniu.
źródło
Po prostu użyj:
źródło
Za pomocą kątownika można utworzyć zmienną szablonu i ustawić wartość na
null
Lub możesz utworzyć metodę resetowania w ten sposób
component.ts
szablon
demo Stackblitz
źródło
Nie można go zresetować, ponieważ jest to plik tylko do odczytu. możesz go sklonować, aby obejść problem.
źródło
Powinieneś spróbować:
źródło
Można to zrobić w ten sposób
źródło
Moje najlepsze rozwiązanie
źródło
Rozwiązanie jQuery:
źródło
on change
zdarzenia wejściowego pliku wartość zostaje wyczyszczona. Typ danych wejściowych jest resetowany z none do file.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"
#activeFrameinputFileng2FileSelect [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) => {
};
źródło
źródło
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:
źródło
źródło
Działa również w przypadku kontroli dynamicznych.
JavaScript
JQuery
źródło
źródło