как сбросить <input type = «file»>


402

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

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

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

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


1
Что вы подразумеваете под контентом?
Месс

3
Вы имеете в виду, что после того, как пользователь выберет файл, вы хотите сбросить выбранный файл до «ничего»?
ddavison


14
это кажется , что просто inputElement.value = ""делает трюк просто отлично , не прибегая к клонированию или упаковки , как предложено. Работает в CH (46), IE (11) и FF (41)
Роберт Коритник

Ответы:


374

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

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

15
Спасибо! Если у вас уже есть ссылка на jquery, $ input.val ("") будет работать как обычно.
Натан

@ 2ndGAB Хм ... У меня только 45.0.1, поэтому я не могу проверить ... кто-нибудь еще?
Джордан Каспер

@ 2ndGAB Исправление, Мой Firefox только что обновился до 46.0.1, и этот код все еще работает там. Можешь подтвердить?
Джордан Каспер

@jakerella, что странно, для меня установка значения селектора входного файла вызывает исключение безопасности. Единственное решение, которое я успешно использую,$(#myfileselector).trigger('fileselect', [1, ""]);
fralbo

3
input.type = ''; input.type = 'file'; // наслаждайтесь
Maxmaxmaximus

81

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

onClick="this.form.reset()"

7
Это правильный метод. Он работает во всех браузерах и не вступает в противоречие с какими-либо средствами защиты, которые реализуются браузерами, чтобы не допустить, чтобы мошеннические скрипты возились с входным файлом .value.
Евгений Рябцев

9
Классно, не для меня, хотя, потому что он также сбрасывает другие поля в этой форме.
Starwave

2
Аналогичное решение JQuery может быть $("form").get(0).reset();. .get(0)Возвращает фактический элемент формы , так что вы можете использовать reset()функцию.
teewuane

74

Это ЛУЧШЕЕ решение:

input.value = ''

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

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

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


4
Есть ли какая-то конкретная причина для сброса input.typeтоже? Установка только значения ''дает ожидаемый результат.
Харшита Сетхи

Это запускает onchangeсобытие в MS Edge?
hotohoto

@hotohoto я не знаю, есть Mac OS)
Maxmaxmaximus

1
Для этого нужно больше голосов или что-то в этом роде, я нашел слишком много времени, чтобы найти этот ответ, это единственный, который я нашел, который работает в IE.
СЧ

input.value = '' создает исключение для консоли в IE11. Однако сброс input.type работает во всех браузерах без каких-либо ошибок.
Мирослав Яссо

45

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

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

тогда просто сделайте:

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

сбросить управление файлом.


6
Лучшее решение ИМХО.
Сергей Максимчук

3
Или используйте DOM:inputFileEl.value = '';
Фам

44

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

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

а также

var input = $("#control");

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

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


1
К сожалению, это не сбрасывает входное значение, смотрите это jsFiddle . Для лучшего решения, смотрите этот ответ .
Gyrocode.com

1
@ Gyrocode.com Этот jsFiddle не работает, если изображение загружено во второй раз после сброса.
Сартак Сингхал

2
@SarthakSinghal, К сожалению, вы написали неправильный код, вы должны были сделать jsfiddle.net/cL1LooLe
Роджер Рассел

2
@RogerRussel: Точно ... Мне было интересно, почему верхние ответы говорили, что это работает только один раз, что является явным индикатором того, что какая-то ссылка теряется. И это действительно так, потому что изначально была создана ссылка для ввода, которая впоследствии была заменена новым элементом ввода.
Роберт Коритник

1
Просто сбросить valueподобное в других ответах кажется гораздо более простым, чем манипулирование DOM.
CodeFinity

40

Другое решение (без выбора элементов 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.');
  }

Другой способ angular2: stackoverflow.com/questions/40165271/…
Бельтер

Это будет работать только с именами файлов, которые содержат только один .перед расширением файла.
Ма Коби

Правильно, я отредактировал код и предоставил более универсальный подход для получения расширения файла.
отправлено

31

РЕШЕНИЕ

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

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

DEMO

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

ССЫЛКИ

См. Как сбросить ввод файла с помощью JavaScript для получения дополнительной информации.


1
@alessadro, нет, просто элемент <input type="file">с определенным идентификатором.
Gyrocode.com

Спасибо, уточнить ваш ответ :) +1
подсвечник

1
Это самое чистое и наиболее совместимое с браузером решение, которое я когда-либо нашел - спасибо.
Пэт

25

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

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

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


как делать с jquery
Ананд Чоудхари

1
@AnandChoudhary это работает и в jQuery, но вы можете заменить const file = document.querySelector ('. File'); с const file = $ ('. file'); или просто сделайте $ ('. file'). val (""); опустошить его
Алиреза

18

Особенно для угловых

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


рад, что мне не нужно использовать угловой!
user2677034

Нет. Фикс был бы там. Только я нашел это. Что вы используете тогда?
P Satish Patro

Извините, я был саркастичен ... Я просто использую document.getElementById ('uploadFile'). Value = ""; как я не использую угловой.
user2677034

Хороший. Я думал то же самое, но, используйте Angular / React / VUe. Это мощные платформы для реализации переопределения маршрутизации, компонентов, сервисов, манипуляций с dom
P Satish Patro,

14

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

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

this.$refs.fileref.value = ''

2
Спасибо чувак! Я думал, что никогда не найду решение с vuejs: D, ты с ума сошел мой день!
Жока

1
Работал как шарм! Спасибо
F KIng

8

Сброс входного файла находится на очень одном

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

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

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

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

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

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

5

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


5

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

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

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

this.fileInput.value = "";


4

С помощью angular вы можете создать переменную шаблона и установить значение 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>

демонстрация стекаблиц


2

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



2

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

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>



1

Решение jQuery:

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

Попробуйте добавить этот ответ, чтобы объяснить, как он работает.
Ошибки

@ Ошибки предполагают, что это говорит само за себя. Когда on changeсобытие входного файла инициируется, значение очищается. Тип ввода сбрасывается с нуля в файл.

2
@ Джорди да, я знаю, что он делает :) Я просто думал, что с дюжиной других ответов стоило бы попытаться выделить его. Это появилось, пока я рецензировал. Они могли бы на самом деле скопировать ваш комментарий, чтобы добавить его немного больше. Всегда стоит пытаться объяснить, почему вы чувствуете, что код исправляет проблему с OP.
Ошибки

1

Я столкнулся с проблемой с ng2-file-upload для angular. Если вы ищете решение в угловых, обратитесь к приведенному ниже коду

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 = '';`

};


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

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

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

    });
});


Хотя этот код может решить вопрос, в том числе объяснение того, как и почему это решает проблему, действительно поможет улучшить качество вашего сообщения и, вероятно, получит больше голосов "за". Помните, что вы отвечаете на вопрос для читателей в будущем, а не только для того, кто спрашивает сейчас. Пожалуйста, измените свой ответ, чтобы добавить объяснения и указать, какие ограничения и предположения применяются. Из обзора
двойной сигнал

0

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

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

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

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

0

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

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

});

0

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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.