Как reset <input type = "file" >

Я разрабатываю приложение для метро с VS2012 и Javascript

Я хочу reset содержимое ввода моего файла:

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

Как мне это сделать?

ОТВЕТЫ

Ответ 1

Решение jQuery, которое @dhaval-marthak опубликовано в комментариях, очевидно работает, но если вы посмотрите на фактический вызов jQuery, довольно легко увидеть, что делает jQuery, просто установив атрибут value в пустую строку. Таким образом, в "чистом" JavaScript это будет:

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

Ответ 2

Вам нужно обернуть <input type = "file"> в теги <form>, а затем вы можете ввести reset, сбросив форму:

onClick="this.form.reset()"

Ответ 3

Это самое лучшее решение:

input.value = ''

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

Из всех ответов здесь это самое быстрое решение. Нет входного клонирования, без формы reset!

Я проверил его во всех браузерах (он даже поддерживает IE8).

Ответ 4

Вы можете просто клонировать его и заменять самим собой, при этом все события все еще связаны:

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

и

var input = $("#control");

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

Спасибо: Css-tricks.com

Ответ 5

Если у вас есть следующее:

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

то просто выполните:

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

до reset файлового управления.

Ответ 6

Другое решение (без выбора элементов HTML DOM)

Если вы добавили на этот вход прослушиватель событий "change", тогда в javascript-коде вы можете позвонить (для некоторых определенных условий):

event.target.value = '';

Например, в HTML:

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

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

Ответ 7

РЕШЕНИЕ

Следующий код работал для меня с jQuery. Он работает в каждом браузере и позволяет сохранять события и настраиваемые свойства.

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

DEMO

См. Этот jsFiddle для кода и демонстрации.

ССЫЛКИ

Дополнительные сведения см. В разделе Как сбросить ввод файлов с помощью JavaScript.

Ответ 8

Сброс кнопки загрузки файла настолько прост, используя чистый JavaScript !

Существует несколько способов сделать это, но простой способ, который хорошо работает во многих браузерах, заключается в изменении поданного значения на ничего, так что загрузка загружается сбрасывается, а также пытается использовать чистый javascript, а не любую фреймворк, я создал код ниже, просто проверьте его (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}
<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

Ответ 9

Я использую для vuejs

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

this.$refs.fileref.value = ''

Ответ 10

Особенно для angular

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

Будет работать, но если вы используете Angular В нем будет сказано, что "значение свойства" не существует для типа "HTMLElement'.any".

document.getElementById() возвращает тип HTMLElement, который не содержит свойства value. Итак, приведите его в HTMLInputElement

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

ДОПОЛНИТЕЛЬНО: -

Тем не менее, мы не должны использовать DOM document.xyz() в angular.

Для этого в angular предусмотрены @VIewChild, @ViewChildren и т.д., Которые являются document.querySelector(), document.queryselectorAll() соответственно.

Даже я не читал это. Лучше следить за блогами экспертов

Перейдите по этой ссылке1, ссылке2

Ответ 11

Входной файл реселлера находится на очень одиночном

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

Если вы связываете reset файл в другом поле формы или загружаете форму с помощью ajax.

Этот пример применим

селектор, например, $('input[type=text]') или любой элемент формы

событие click, change или любое событие

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

Ответ 12

С IE 10 Я решил проблему с помощью

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

где:

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

Ответ 13

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

Ответ 14

Просто используйте:

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

Ответ 15

С угловым вы можете создать переменную шаблона и установить значение null

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

Или вы можете создать способ сброса, подобный этому

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

шаблон

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

демо-версия stackblitz

Ответ 16

Вы не можете reset, так как это файл только для чтения. вы можете клонировать его, чтобы решить проблему.

Ответ 17

Вы должны попробовать следующее:

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

Ответ 18

Это можно сделать так

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>

Ответ 19

Есть много подходов, и я предлагаю пойти с приложением ссылки на вход.

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

очистить значение после отправки.

this.fileInput.value = "";

Ответ 20

Решение jQuery:

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

Ответ 21

Я столкнулся с проблемой загрузки ng2 файлов для углового. если вы ищете решение в угловом порядке, см. ниже код

HTML:

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

составная часть

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

@ViewChild(' activeFrameinputFile ') InputFrameVariable : ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {

'this.'**InputFrameVariable**'.nativeElement.value = '';'

};

Ответ 22

Если у вас есть несколько файлов в вашей форме, но только один из них будет reset:

если вы используете boostrap, jquery, filestyle для отображения формы входного файла:

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

Ответ 23

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

Ответ 24

Работает и для динамических элементов управления.

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

});

Ответ 25

function resetImageField() {
    var $el = $('#uploadCaptureInputFile');                                        
    $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>

Ответ 26

Чтобы очистить входной файл, выполните следующие действия:

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

Ответ 27

Вы должны reset форму, содержащую элемент ввода файла

 $('#formId').get(0).reset();

это будет reset все элементы внутри формы