Очистка поля загрузки файла HTML через JavaScript

Question

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

Возможно ли это через 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(''); 
}) ;

Answer 1

попробуйте это нормально работать

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

Answer 2

Я знаю, что 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's 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);
}

Answer 3

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

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

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

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

для сброса или очистки последнего выбранного файла.

Answer 4

jQuery-проверенный метод, работающий нормально в FF & Chrome:

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

Answer 5

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

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

Answer 6

Я столкнулся с проблемой ng2-file-upload для angular. если вы ищете решение для угловых с помощью 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 = ''; };