Làm cách nào để thiết lập lại <kiểu nhập = tập tin trên mạng >>

Tôi đang phát triển ứng dụng metro với VS2012 và Javascript

Tôi muốn đặt lại nội dung nhập tệp của mình:

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

Tôi nên làm thế nào?

Giải pháp jQuery mà @ dhaval-marthak đăng trong các bình luận rõ ràng hoạt động, nhưng nếu bạn nhìn vào cuộc gọi jQuery thực tế, thật dễ dàng để xem jQuery đang làm gì, chỉ cần đặt valuethuộc tính thành một chuỗi trống. Vì vậy, trong JavaScript "thuần túy" sẽ là:

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

Bạn cần bọc <input type = “file”>vào <form>các thẻ và sau đó bạn có thể đặt lại đầu vào bằng cách đặt lại biểu mẫu của mình:

onClick="this.form.reset()"

Đây là giải pháp TỐT NHẤT:

input.value = ''

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

Trong tất cả các câu trả lời ở đây đây là giải pháp nhanh nhất. Không có bản sao đầu vào, không có hình thức thiết lập lại!

Tôi đã kiểm tra nó trong tất cả các trình duyệt (nó thậm chí còn hỗ trợ IE8).

Trong trường hợp bạn có những điều sau đây:

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

sau đó chỉ cần làm:

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

để thiết lập lại kiểm soát tập tin.

Bạn chỉ có thể sao chép nó và thay thế nó bằng chính nó, với tất cả các sự kiện vẫn được đính kèm:

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

và

var input = $("#control");

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

Cảm ơn: Css-tricks.com

Một giải pháp khác (không chọn các phần tử DOM HTML)

Nếu bạn đã thêm trình lắng nghe sự kiện 'thay đổi' trên đầu vào đó, thì trong mã javascript, bạn có thể gọi (đối với một số điều kiện được chỉ định):

event.target.value = '';

Ví dụ trong HTML:

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

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

GIẢI PHÁP

Đoạn mã sau làm việc với tôi với jQuery. Nó hoạt động trong mọi trình duyệt và cho phép bảo tồn các sự kiện và thuộc tính tùy chỉnh.

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

BẢN GIỚI THIỆU

Xem jsFiddle này cho mã và trình diễn.

LIÊN KẾT

Xem Cách đặt lại tệp nhập bằng JavaScript để biết thêm thông tin.

Đặt lại nút tải lên tệp rất dễ dàng bằng cách sử dụng JavaScript thuần túy !

Có một số cách để làm điều đó, nhưng cách đơn giản phải hoạt động tốt trong nhiều trình duyệt là thay đổi giá trị tệp thành không có gì, bằng cách tải lên tệp được đặt lại, cũng cố gắng sử dụng javascript thuần chứ không phải bất kỳ khung nào, tôi đã tạo mã bên dưới, chỉ cần kiểm tra nó (ES6):

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

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

Riêng về góc

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

Sẽ hoạt động, nhưng nếu bạn sử dụng Angular Nó sẽ nói "Giá trị 'thuộc tính' không tồn tại trên loại 'HTMLEuity'.any"

document.getEuityById () trả về kiểu HTMLEuity không chứa thuộc tính giá trị. Vì vậy, hãy chuyển nó thành HTMLInputEuity

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

THÊM :-

Tuy nhiên, chúng ta không nên sử dụng thao tác DOM (document.xyz ()) trong góc.

Để làm được điều đó, góc đã cung cấp @VIewChild, @ViewChildren, v.v., tương ứng là document.querySelector (), document.queryselector ALL ().

Ngay cả tôi cũng không đọc nó. Tốt hơn để theo dõi blog của chuyên gia

Đi qua link1 này , link2

Tôi sử dụng cho vuejs

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

this.$refs.fileref.value = ''

Các tập tin đầu vào thiết lập lại là rất đơn

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

Nếu bạn liên kết đặt lại tệp trong trường thay đổi trường khác của biểu mẫu hoặc tải biểu mẫu bằng ajax.

Ví dụ này được áp dụng

ví dụ, bộ chọn là $('input[type=text]')hoặc bất kỳ phần tử nào của biểu mẫu

sự kiện click , changehoặc bất kỳ sự kiện

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

Với IE 10 tôi đã giải quyết vấn đề với:

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

Ở đâu :

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

Có nhiều cách tiếp cận và tôi sẽ đề xuất đi kèm với đính kèm ref vào đầu vào.

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

để xóa giá trị sau khi gửi.

this.fileInput.value = "";

Chỉ dùng:

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

Với góc cạnh, bạn có thể tạo một biến mẫu và đặt giá trị thành null

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

Hoặc bạn có thể tạo một phương thức để thiết lập lại như thế này

thành phần

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

bản mẫu

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

bản demo stackblitz

Bạn có thể cài đặt lại vì đây là tệp chỉ đọc. bạn có thể sao chép nó để giải quyết vấn đề.

Bạn nên thử điều này:

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

Điều này có thể được thực hiện như thế này

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>

Giải pháp tốt nhất của tôi

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

Giải pháp jQuery:

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

Tôi đã đối mặt với vấn đề với ng2-file-upload cho góc. Nếu bạn đang tìm kiếm giải pháp trong góc tham khảo mã bên dưới

HTML:

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

thành phần

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;

    });
});

Nếu bạn có một vài tệp trong biểu mẫu của mình nhưng chỉ muốn một trong số chúng được đặt lại:

nếu bạn sử dụng boostrap, jquery, filestyle để hiển thị biểu mẫu tệp đầu vào:

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

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

Hoạt động cho các điều khiển động quá.

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

});