Jak wyczyścić dane wejściowe pliku HTML za pomocą JavaScript?

Chcę wyczyścić dane wejściowe pliku w moim formularzu.

Wiem o ustawianiu źródeł na tę samą metodę ... Ale ta metoda nie usunie wybranej ścieżki pliku.

Uwaga : chciałbym uniknąć konieczności ponownego ładowania strony, resetowania formularza lub wykonywania połączenia AJAX.

czy to możliwe?

Co powiesz na usunięcie tego węzła i utworzenie nowego o tej samej nazwie?

Istnieją 3 sposoby na wyczyszczenie danych wejściowych za pomocą javascript:

1. ustaw właściwość value na pustą lub null.

   Działa dla IE11 + i innych nowoczesnych przeglądarek.

2. Utwórz nowy element wejściowy pliku i zastąp stary.

   Wadą jest utrata detektorów zdarzeń i właściwości expando.

3. Zresetuj formularz właściciela za pomocą metody form.reset ().

   Aby uniknąć wpływu na inne elementy wejściowe w tym samym formularzu właściciela, możemy utworzyć nowy pusty formularz i dołączyć element wejściowy pliku do tego nowego formularza i zresetować go. W ten sposób działa dla wszystkich przeglądarek.

Napisałem funkcję javascript. demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : W przypadku nowoczesnych przeglądarek po prostu użyj

input.value = '';

Stara odpowiedź:

Co powiesz na:

input.type = "text";
input.type = "file";

Nadal muszę zrozumieć, dlaczego to nie działa z zestawem webkit .

W każdym razie działa to z IE9>, Firefox i Operą.
Sytuacja z webkitem polega na tym, że wydaje mi się, że nie mogę zmienić go z powrotem do pliku.
W przypadku IE8 sytuacja jest taka, że ​​zgłasza wyjątek bezpieczeństwa.

Edycja: W przypadku Webkit, Opera i Firefox działa to jednak:

input.value = '';

(sprawdź powyższą odpowiedź z tą propozycją)

Zobaczę, czy uda mi się znaleźć przyjemniejszy, bardziej przejrzysty sposób na zrobienie tej między przeglądarkami bez potrzeby GC.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Działa z większością przeglądarek. Nie działa z IE <9, to wszystko.
Testowane na firefox 20, chrome 24, opera 12, IE7, IE8, IE9 i IE10.

Ustawienie wartości na '' nie działa we wszystkich przeglądarkach.

Zamiast tego spróbuj ustawić wartość nulltak:

document.getElementById('your_input_id').value= null;

EDYCJA: Dostaję bardzo ważne powody bezpieczeństwa, aby nie pozwolić JS na ustawienie danych wejściowych pliku, jednak wydaje się rozsądne zapewnienie prostego mechanizmu czyszczenia już wybranych danych wyjściowych. Próbowałem użyć pustego ciągu, ale nie działało to we wszystkich przeglądarkach,NULL działał we wszystkich przeglądarkach, które próbowałem (Opera, Chrome, FF, IE11 + i Safari).

EDYCJA: Należy pamiętać, że ustawienie NULLdziała we wszystkich przeglądarkach, a ustawienie na pusty ciąg nie działa.

Niestety żadna z powyższych odpowiedzi nie wydaje się obejmować wszystkich podstaw - przynajmniej nie w przypadku moich testów z javascriptem waniliowym.

• .value = nullwydaje się działać na FireFox, Chome, Opera i IE11 (ale nie IE8 / 9/10 )

• .cloneNode(i .clone()jQuery) na FireFox wydaje się kopiować .valueover, przez co klonowanie jest bezcelowe.

Oto napisana przeze mnie funkcja javascript vanilla, która działa na FireFox (27 i 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... to są jedyne obecnie dostępne przeglądarki do mnie do przetestowania.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrlParametrem jest plik wejściowy sama, więc funkcja będzie wywoływana jako ...

clearFileInput(document.getElementById("myFileInput"));

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 = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

PRÓBNY

Zobacz to jsFiddle aby uzyskać kod i demonstrację.

SPINKI DO MANKIETÓW

• Czyszczenie <input type = 'file' /> za pomocą jQuery

• Jak zresetować dane wejściowe pliku za pomocą JavaScript

Musisz go zastąpić nowym wejściem pliku. Oto, jak można to zrobić za pomocą jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

i użyj tej linii, gdy chcesz wyczyścić pole wejściowe (na przykład w niektórych zdarzeniach):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Edycja:
ten nie działa w IE i operze, ale wydaje się działać z przeglądarkami Firefox, Safari i Chrome.

Miałem ten sam problem i wpadłem na to.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

To całkiem proste.

document.querySelector('#input-field').value = '';

Szukałem prostego i przejrzystego sposobu na wyczyszczenie danych wejściowych z pliku HTML, powyższe odpowiedzi są świetne, ale żadna z nich tak naprawdę nie odpowiada na to, czego szukam, dopóki nie znalazłem w Internecie prostego i eleganckiego sposobu na zrobienie tego:

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

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

cała zasługa Chrisa Coyiera .

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

Powyższe odpowiedzi oferują nieco niezdarne rozwiązania z następujących powodów:

1. Nie lubię konieczności a potem coraz html, jest bardzo zaangażowany i brudne.wrapinput

2. JS między przeglądarkami jest przydatny i wydaje się, że w tym przypadku jest zbyt wiele niewiadomych, aby niezawodnie używać typeprzełączania (które, znowu, jest trochę brudne) i ustawiania valuena''

Więc oferuję Ci moje rozwiązanie oparte na jQuery:

$('#myinput').replaceWith($('#myinput').clone())

Robi to, co mówi, zastępuje dane wejściowe klonem samego siebie. Klon nie będzie miał wybranego pliku.

Zalety:

1. Prosty i zrozumiały kod
2. Żadnego niezgrabnego owijania lub zmiany pisma
3. Zgodność z różnymi przeglądarkami (popraw mnie, jeśli się mylę)

Wynik: szczęśliwy programista

Oto moje dwa centy, pliki wejściowe są przechowywane jako tablice, więc oto jak je wyzerować

document.getElementById('selector').value = []

zwraca to pustą tablicę i działa we wszystkich przeglądarkach

Pomogło mi to, że zamiast wyczyścić kolejkę próbowałem pobrać i przesłać ostatni wybrany plik za pomocą pętli i zadziałało. Oto kod.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Mam nadzieję, że to może niektórym pomóc.

Wypróbowałem większość rozwiązań, ale wydawało się, że nikt nie działa. Jednak poniżej znalazłem spacer.

Konstrukcja formy jest: form=> label, inputisubmit button . Po wybraniu pliku nazwa pliku zostanie wyświetlona obok etykiety, robiąc to ręcznie w JavaScript.

Więc moja strategia jest taka: początkowo przesyłanie buttonjest wyłączone, po wybraniu pliku disabledatrybut przycisku przesyłania zostanie usunięty, tak że mogę przesłać plik. Po przesłaniu wyczyszczę, labelco sprawia, że ​​wygląda na to, że wyczyściłem plik, inputale w rzeczywistości nie. Następnie ponownie wyłączę przycisk przesyłania, aby uniemożliwić przesłanie formularza.

Ustawiając przesyłanie button disablelub nie, zatrzymuję przesyłanie pliku wiele razy, chyba że wybiorę inny plik.

Zmieniłem wpisywanie tekstu i powrót do wpisywania do pliku za pomocą setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}