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

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ć?

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 = "";

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

onClick="this.form.reset()"

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

Jeśli masz następujące rzeczy:

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

następnie po prostu wykonaj:

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

zresetować kontrolę pliku.

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

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

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 .

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>

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

Używam dla vuejs

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

this.$refs.fileref.value = ''

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

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

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 = "";

Po prostu użyj:

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

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

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

Powinieneś spróbować:

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

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>

Moje najlepsze rozwiązanie

$(".file_uplaod_input").val('');  // this is working best ):

Rozwiązanie jQuery:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = '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" #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 = '';`

};

<input type="file" id="mfile" name="mfile">
<p>Reset</p>

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

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

    });
});

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

var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));

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

});