Очистка поля загрузки файла HTML с помощью JavaScript

Я хочу reset поле для загрузки файла, когда пользователь выбирает другую опцию.

Возможно ли это с помощью JavaScript? Я подозреваю, что элемент загрузки файла обрабатывается по-разному, потому что он взаимодействует с файловой системой пользователя и, возможно, неизменен.

В принципе, я хочу что-то вроде (псевдокода):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;

Ответ 1

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

Для такой формы, как:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

Прямой способ DOM:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

Простой способ DOM. Это может не работать в старых браузерах, которые не любят входы файлов:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

Способ jQuery:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

Сброс всей формы через jQuery: fooobar.com/questions/14666/...

Ответ 2

Просто в 2014 году входной элемент, имеющий id, поддерживает функцию val('').

Для ввода -

<input type="file" multiple="true" id="File1" name="choose-file" />

Этот js очищает входной элемент -

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

Ответ 3

Да, элемент загрузки защищен от непосредственной манипуляции в разных браузерах. Однако вы можете удалить элемент из дерева DOM, а затем вставить новый вместо него через JavaScript. Это даст вам тот же результат.

Что-то по строкам:

$('#container-element').html('<input id="upload-file" type="file"/>');

Ответ 4

Код, который я использовал, был

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

Спасибо всем за предложения и указатели!

Ответ 5

Они не получают фокус-событий, поэтому вам придется использовать трюк, подобный этому: только способ очистить его - очистить всю форму

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>

Ответ 6

действительно нравится держать вещи простыми, как это:)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');

Ответ 7

Короче version, который отлично подходит для меня, а именно:

document.querySelector('#fileUpload').value = "";

Ответ 8

Простое решение:

document.getElementById("upload-files").value = "";

Ответ 9

Этот jQuery работал у меня в IE11, Chrome 53 и Firefox 49:

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);

Ответ 10

попробуйте эту работу отлично

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;

Ответ 11

Для совместимости, когда ajax недоступен, установите .val('') или он отправит последний загруженный файл ajax, который все еще присутствует на входе. Следующее должно правильно очистить ввод, сохраняя события .on():

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

Ответ 12

Попробуйте этот код...

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());

Ответ 13

jQuery проверенный метод работает отлично в FF и Chrome:

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});

Ответ 14

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

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

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

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

до reset или очистить последний выбранный файл.

Ответ 15

Я знаю, что FormData api не так дружелюбен к старым браузерам и тому подобное, но во многих случаях вы его используете (и, надеюсь, тестируете для поддержки), так что это будет работать нормально!

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}

Ответ 16

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

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