<input type = "file"> nasıl sıfırlanır

VS2012 ve Javascript ile bir metro uygulaması geliştiriyorum

Dosya girdimin içeriğini sıfırlamak istiyorum:

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

Bunu nasıl yapmalıyım?

@ Dhaval-marthak'ın yorumlarda yayınladığı jQuery çözümü açıkça işe yarıyor, ancak gerçek jQuery çağrısına bakarsanız, jQuery'nin ne yaptığını görmek oldukça kolaydır, sadece valueniteliği boş bir dizeye ayarlayarak . "Saf" JavaScript'te şöyle olur:

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

Sen sarmak gerekiyor <input type = “file”>için <form>etiketleri ve sonra formunuzu sıfırlayarak girişi sıfırlayabilirsiniz:

onClick="this.form.reset()"

Bu EN İYİ çözümdür:

input.value = ''

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

Buradaki tüm cevaplardan en hızlı çözüm budur. Giriş klonu yok, form sıfırlama yok!

Tüm tarayıcılarda kontrol ettim (hatta IE8 desteği var).

Aşağıdakilere sahipseniz:

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

o zaman yap:

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

dosya kontrolünü sıfırlamak için.

Sadece klonlayabilir ve onunla değiştirebilirsiniz, tüm olaylar hala bağlı:

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

ve

var input = $("#control");

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

Teşekkürler: Css-tricks.com

Başka bir çözüm (HTML DOM öğelerini seçmeden)

Bu girişe 'change' olay dinleyicisini eklediyseniz, javascript kodunda çağırabilirsiniz (belirtilen bazı koşullar için):

event.target.value = '';

Örneğin HTML'de:

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

Ve javascript'te:

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

ÇÖZÜM

Aşağıdaki kod jQuery ile benim için çalıştı. Her tarayıcıda çalışır ve olayların ve özel özelliklerin korunmasına izin verir.

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

DEMO

Kod ve tanıtım için bu jsFiddle'a bakın .

BAĞLANTILAR

Daha fazla bilgi için bkz. JavaScript ile dosya girişini sıfırlama .

Saf JavaScript kullanarak bir dosya yükleme düğmesini sıfırlamak çok kolay !

Bunu yapmanın birkaç yolu vardır, ancak birçok tarayıcıda iyi çalışan zorunluluk yolu dosyalanmış değeri hiçbir şeye değiştirmektir, bu şekilde yükleme dosyası sıfırlanır, ayrıca herhangi bir çerçeve yerine saf javascript kullanmaya çalışın, Aşağıdaki kodu kontrol edin (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}

<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

Özellikle Açısal

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

Çalışacak, ancak Açısal kullanırsanız "HTMLElement'.any" türünde "Özellik 'değeri' yok diyecektir.

document.getElementById (), value özelliği içermeyen HTMLElement türünü döndürür. Bu nedenle, HTMLInputElement içine dökün

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

EKSTRA: -

Bununla birlikte, DOM manipülasyonunu (document.xyz ()) açısal olarak kullanmamalıyız.

Bu açısal bunu yapmak için sırasıyla document.querySelector (), document.queryselectorAll () olan @VIewChild, @ViewChildren vb.

Ben okumadım bile. Uzman bloglarını takip etmek daha iyi

Bu üzerinden gidin link1 , LINK2

Vuejs için kullanıyorum

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

this.$refs.fileref.value = ''

Sıfırlanan girdi dosyası çok tek

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

Eğer bağlarsanız, formun diğer alanını değiştirmek için dosyayı sıfırlayın veya ajax ile formu yükleyin.

Bu örnek uygulanabilir

Örneğin, seçici$('input[type=text]') veya formun herhangi bir öğesi

Olay click , changeveya herhangi bir olay

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

İle IE 10 Sorunu ile çözüldü:

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

nerede :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>

Birçok yaklaşım vardır ve ben girdiye ref eki ile gitmek önerecektir.

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

Gönderdikten sonra değeri temizlemek için.

this.fileInput.value = "";

Sadece kullan:

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

Açısal ile bir şablon değişkeni oluşturabilir ve değeri null

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

Veya bu şekilde sıfırlamak için bir yöntem oluşturabilirsiniz

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

şablon

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

stackblitz demosu

Bunu salt okunur bir dosya olduğu için sıfırlayamazsınız. sorunu çözmek için klonlayabilirsiniz.

Bunu denemelisiniz:

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

Bu böyle yapılabilir

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>

En İyi Çözümüm

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

jQuery çözümü:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });

Açısal olarak ng2-file-upload ile ilgili sorunla karşılaştım. çözümü açısal olarak arıyorsanız aşağıdaki kodu inceleyin

HTML:

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

bileşen

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

@ViewChild('activeFrameinputFile ')GirdiFrameDeğişken: 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;

    });
});

Formunuzda birkaç dosyanız varsa ancak bunlardan yalnızca birinin sıfırlanmasını istiyorsanız:

giriş dosyası formunu görüntülemek için boostrap, jquery, filestyle kullanıyorsanız:

$("#"+idInput).filestyle('clear');

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

Dinamik kontroller için de çalışır.

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

});