як скинути <input type = "file">

Я розробляю додаток для метро з VS2012 та Javascript

Я хочу скинути вміст мого файлу:

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

Як мені це зробити?

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

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

Вам потрібно звернути , <input type = “file”>щоб <form>теги , а потім ви можете скинути вхід скинувши свою форму:

onClick="this.form.reset()"

Це найкраще рішення:

input.value = ''

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

З усіх відповідей тут це найшвидше рішення. Немає клону вводу, не скидається форма!

Я перевірив його у всіх браузерах (у нього навіть є підтримка IE8).

Якщо у вас є наступне:

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

тоді просто зробіть:

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

щоб скинути керування файлами.

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

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

і

var input = $("#control");

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

Дякуємо: Css-tricks.com

Інше рішення (без вибору елементів HTML DOM)

Якщо ви додали прослуховувач подій "змінити" на цей вхід, тоді в коді 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.');
  }

РІШЕННЯ

Наступний код працював для мене з jQuery. Він працює у кожному браузері і дозволяє зберегти події та власні властивості.

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

DEMO

Дивіться цей jsFiddle для коду та демонстрації.

ПОСИЛАННЯ

Див. Як відновити введення файлів за допомогою JavaScript для отримання додаткової інформації.

Скинути кнопку завантаження файлів так просто за допомогою чистого JavaScript !

Є декілька способів це зробити, але якраз необхідний спосіб роботи, який працює у багатьох браузерах, змінює подане значення ні до чого, таким чином завантажене завантаження отримує скидання, також намагайтеся використовувати чистий javascript, а не будь-який фреймворк, я створив код нижче, просто перевірте це (ES6):

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

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

Особливо для кутових

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

Буде працювати, але якщо ви використовуєте Angular, він скаже, що "Властивість" значення "не існує для типу" HTMLElement'.any "

document.getElementById () повертає тип HTMLElement, який не містить властивості значення. Отже, киньте його в HTMLInputElement

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

ДОПОМОГА: -

Однак ми не повинні використовувати маніпуляцію з DOM (document.xyz ()) у кутовій.

Для цього кутовий надав @VIewChild, @ViewChildren тощо, які є document.querySelector (), document.queryselectorAll () відповідно.

Навіть я цього не читав. Краще слідкуйте за блогами експертів

Перехід через цю link1 , LINK2

Я використовую для vuejs

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

this.$refs.fileref.value = ''

Повторний вхідний файл є дуже одиничним

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

Якщо ви пов'язуєте, скиньте файл у зміні іншого поля форми або завантажте форму з ajax.

Цей приклад застосовний

Селектором, наприклад, є $('input[type=text]')будь-який елемент форми

подія click , changeабо будь-яка подія

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

За допомогою 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"/>

Існує багато підходів, і я запропонував би перейти з посиланням на вклад.

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

очистити значення після надсилання.

this.fileInput.value = "";

Просто використовуйте:

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

За допомогою кута ви можете створити змінну шаблону та встановити значення null

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

Або ви можете створити метод для такого скидання

компонент.ц

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

шаблон

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

stackblitz demo

Ви не можете його скинути, оскільки це файл, доступний лише для читання. ви можете його клонувати, щоб вирішити проблему.

Спробуйте це:

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

Це можна зробити так

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>

Моє найкраще рішення

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

jQuery рішення:

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

Я зіткнувся з проблемою із завантаженням файлів 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 = '';`

};

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

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

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

    });
});

Якщо у вас є кілька файлів у формі, але ви хочете, щоб один із них був скинутий:

якщо ви використовуєте boostrap, jquery, стиль файлу для відображення форми вхідного файлу:

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

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

Працює і для динамічного управління.

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

});