Как удалить файл из списка файлов

Я создаю веб-приложение с возможностью перетаскивания для загрузки, используя HTML5, и перетаскиваю файлы в div и, конечно же, извлекаю объект dataTransfer, который дает мне FileList .

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

Желательно, чтобы я просто удалил их из FileList; Мне они бесполезны. Но если это невозможно, я должен вместо этого написать в проверках код, который взаимодействует с FileList? Это кажется громоздким.

74 голоса | спросил Heilemann 30 J0000006Europe/Moscow 2010, 00:20:01

11 ответов


0

Если вы хотите удалить только несколько выбранных файлов: вы не можете. Рабочий проект API-интерфейса файла , на который вы ссылаетесь, содержит примечание:

  

Интерфейс HTMLInputElement   [HTML5] имеет только для чтения FileList   атрибут, […]
  [выделение мое]

Прочитав немного рабочего документа HTML 5, я наткнулся на API-интерфейсы общих input элементов . Похоже, вы можете удалить весь список файлов, установив свойство value в input объект в пустую строку, например:

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

Кстати, статья использование файлов из веб-приложений также может представлять интерес.

ответил Marcel Korpel 2 J000000Friday10 2010, 03:11:38
0

Этот вопрос уже помечен как отвеченный, но я хотел бы поделиться информацией, которая может помочь другим с использованием FileList.

Было бы удобно рассматривать FileList как массив, но такие методы, как sort, shift, pop и slice не работают. Как и другие, вы можете скопировать FileList в массив. Однако вместо того, чтобы использовать цикл, есть простое однострочное решение для обработки этого преобразования.

 // fileDialog.files is a FileList 

 var fileBuffer=[];

 // append the file list to an array
 Array.prototype.push.apply( fileBuffer, fileDialog.files ); // <-- here

 // And now you may manipulated the result as required

 // shift an item off the array
 var file = fileBuffer.shift(0,1);  // <-- works as expected
 console.info( file.name + ", " + file.size + ", " + file.type );

 // sort files by size
 fileBuffer.sort(function(a,b) {
    return a.size > b.size ? 1 : a.size < b.size ? -1 : 0;
 });

Протестировано нормально в FF, Chrome и IE10 +

ответил Roberto 29 72015vEurope/Moscow11bEurope/MoscowSun, 29 Nov 2015 04:31:28 +0300 2015, 04:31:28
0

Если вы нацелены на вечнозеленые браузеры (Chrome, Firefox, Edge, но также работают в Safari 9+) или можете позволить себе полифилл, вы можете превратить FileList в массив с помощью Array.from() вот так:

 let fileArray = Array.from(fileList);

Тогда легко обрабатывать массив File как любой другой массив.

ответил adlr0 26 PM000000120000002831 2016, 12:37:28
0

Поскольку мы находимся в сфере HTML5, это мое решение. Суть в том, что вы помещаете файлы в массив вместо того, чтобы оставлять их в FileList, а затем, используя XHR2, вы помещаете файлы в объект FormData. Пример ниже.

Node.prototype.replaceWith = function(node)
{
    this.parentNode.replaceChild(node, this);
};
if(window.File && window.FileList)
{
    var topicForm = document.getElementById("yourForm");
    topicForm.fileZone = document.getElementById("fileDropZoneElement");
    topicForm.fileZone.files = new Array();
    topicForm.fileZone.inputWindow = document.createElement("input");
    topicForm.fileZone.inputWindow.setAttribute("type", "file");
    topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple");
    topicForm.onsubmit = function(event)
    {
        var request = new XMLHttpRequest();
        if(request.upload)
        {
            event.preventDefault();
            topicForm.ajax.value = "true";
            request.upload.onprogress = function(event)
            {
                var progress = event.loaded.toString() + " bytes transfered.";
                if(event.lengthComputable)
                progress = Math.round(event.loaded / event.total * 100).toString() + "%";
                topicForm.fileZone.innerHTML = progress.toString();
            };
            request.onload = function(event)
            {
                response = JSON.parse(request.responseText);
                // Handle the response here.
            };
            request.open(topicForm.method, topicForm.getAttribute("action"), true);
            var data = new FormData(topicForm);
            for(var i = 0, file; file = topicForm.fileZone.files[i]; i++)
                data.append("file" + i.toString(), file);
            request.send(data);
        }
    };
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here."));
    var handleFiles = function(files)
    {
        for(var i = 0, file; file = files[i]; i++)
            topicForm.fileZone.files.push(file);
    };
    topicForm.fileZone.ondrop = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
        handleFiles(event.dataTransfer.files);
    };
    topicForm.fileZone.inputWindow.onchange = function(event)
    {
        handleFiles(topicForm.fileZone.inputWindow.files);
    };
    topicForm.fileZone.ondragover = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
    };
    topicForm.fileZone.onclick = function()
    {
        topicForm.fileZone.inputWindow.focus();
        topicForm.fileZone.inputWindow.click();
    };
}
else
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));
ответил Vreenak 20 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 20 Sep 2012 01:54:23 +0400 2012, 01:54:23
0

Я нашел очень быстро & короткий обходной путь для этого. Протестировано во многих популярных браузерах (Chrome, Firefox, Safari);

Во-первых, вы должны преобразовать FileList в массив

var newFileList = Array.from(event.target.files);

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

newFileList.splice(index,1);
ответил Vicky 17 52017vEurope/Moscow11bEurope/MoscowFri, 17 Nov 2017 13:55:16 +0300 2017, 13:55:16
0

Я знаю, что это старый вопрос, но он занимает высокое место в поисковых системах по этому вопросу.

Свойства

в объекте FileList не могут быть удалены, но, по крайней мере, в Firefox их можно изменить . Мой обходной путь: я добавил свойство IsValid=true к тем файлам, которые прошли проверку, и IsValid=false тем, кто этого не сделал.

Затем я просто перебираю список, чтобы убедиться, что только свойства с IsValid=true добавлены в FormData ​​strong. >.

ответил A. Richards 15 J0000006Europe/Moscow 2015, 06:48:12
0

Это временно, но у меня была та же проблема, которую я решил таким образом. В моем случае я загружал файлы с помощью запроса XMLHttp, поэтому я мог публиковать клонированные данные FileList через добавление формданных. Функциональность заключается в том, что вы можете перетаскивать или выбирать несколько файлов столько раз, сколько хотите (повторный выбор файлов не приведет к сбросу клонированного списка файлов), удалить любой файл из списка (клонированных) и отправить его с xmlhttprequest, что бы там ни было. Это то, что я сделал. Это мой первый пост здесь, поэтому код немного грязный. Сожалею. Ах, и мне пришлось использовать jQuery вместо $, как это было в скрипте Joomla.

// some global variables
var clon = {};  // will be my FileList clone
var removedkeys = 0; // removed keys counter for later processing the request
var NextId = 0; // counter to add entries to the clone and not replace existing ones

jQuery(document).ready(function(){
    jQuery("#form input").change(function () {

    // making the clone
    var curFiles = this.files;
    // temporary object clone before copying info to the clone
    var temparr = jQuery.extend(true, {}, curFiles);
    // delete unnecessary FileList keys that were cloned
    delete temparr["length"];
    delete temparr["item"];

    if (Object.keys(clon).length === 0){
       jQuery.extend(true, clon, temparr);
    }else{
       var keysArr = Object.keys(clon);
       NextId = Math.max.apply(null, keysArr)+1; // FileList keys are numbers
       if (NextId < curFiles.length){ // a bug I found and had to solve for not replacing my temparr keys...
          NextId = curFiles.length;
       }
       for (var key in temparr) { // I have to rename new entries for not overwriting existing keys in clon
          if (temparr.hasOwnProperty(key)) {
             temparr[NextId] = temparr[key];
             delete temparr[key];
                // meter aca los cambios de id en los html tags con el nuevo NextId
                NextId++;
          }
       } 
       jQuery.extend(true, clon, temparr); // copy new entries to clon
    }

// modifying the html file list display

if (NextId === 0){
    jQuery("#filelist").html("");
    for(var i=0; i<curFiles.length; i++) {
        var f = curFiles[i];
        jQuery("#filelist").append("<p id=\"file"+i+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+i+")\">x</a></p>"); // the function BorrarFile will handle file deletion from the clone by file id
    }
}else{
    for(var i=0; i<curFiles.length; i++) {
        var f = curFiles[i];
        jQuery("#filelist").append("<p id=\"file"+(i+NextId-curFiles.length)+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+(i+NextId-curFiles.length)+")\">x</a></p>"); // yeap, i+NextId-curFiles.length actually gets it right
    }        
}
// update the total files count wherever you want
jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
    });
});

function BorrarFile(id){ // handling file deletion from clone
    jQuery("#file"+id).remove(); // remove the html filelist element
    delete clon[id]; // delete the entry
    removedkeys++; // add to removed keys counter
    if (Object.keys(clon).length === 0){
        jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
        jQuery("#fileToUpload").val(""); // I had to reset the form file input for my form check function before submission. Else it would send even though my clone was empty
    }else{
        jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
    }
}
// now my form check function

function check(){
    if( document.getElementById("fileToUpload").files.length == 0 ){
        alert("No file selected");
        return false;
    }else{
        var _validFileExtensions = [".pdf", ".PDF"]; // I wanted pdf files
        // retrieve input files
        var arrInputs = clon;

       // validating files
       for (var i = 0; i < Object.keys(arrInputs).length+removedkeys; i++) {
         if (typeof arrInputs[i]!="undefined"){
           var oInput = arrInputs[i];
           if (oInput.type == "application/pdf") {
               var sFileName = oInput.name;
               if (sFileName.length > 0) {
                   var blnValid = false;
                   for (var j = 0; j < _validFileExtensions.length; j++) {
                     var sCurExtension = _validFileExtensions[j];
                     if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                       blnValid = true;
                       break;
                     }
                   }
                  if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                  }
              }
           }else{
           alert("Sorry, " + arrInputs[0].name + " is invalid, allowed extensions are: " + _validFileExtensions.join(" or "));
           return false;
           }
         }
       }

    // proceed with the data appending and submission
    // here some hidden input values i had previously set. Now retrieving them for submission. My form wasn't actually even a form...
    var fecha = jQuery("#fecha").val();
    var vendor = jQuery("#vendor").val();
    var sku = jQuery("#sku").val();
    // create the formdata object
    var formData = new FormData();
    formData.append("fecha", fecha);
    formData.append("vendor", encodeURI(vendor));
    formData.append("sku", sku);
    // now appending the clone file data (finally!)
    var fila = clon; // i just did this because I had already written the following using the "fila" object, so I copy my clone again
    // the interesting part. As entries in my clone object aren't consecutive numbers I cannot iterate normally, so I came up with the following idea
    for (i = 0; i < Object.keys(fila).length+removedkeys; i++) { 
        if(typeof fila[i]!="undefined"){
            formData.append("fileToUpload[]", fila[i]); // VERY IMPORTANT the formdata key for the files HAS to be an array. It will be later retrieved as $_FILES['fileToUpload']['temp_name'][i]
        }
    }
    jQuery("#submitbtn").fadeOut("slow"); // remove the upload btn so it can't be used again
    jQuery("#drag").html(""); // clearing the output message element
    // start the request
    var xhttp = new XMLHttpRequest();
    xhttp.addEventListener("progress", function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
        }, false);
        if ( xhttp.upload ) {
            xhttp.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                var percent = done / total;
                jQuery("#drag").html(Math.round(percent * 100) + "%");
            };
        }
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
         var respuesta = this.responseText;
         jQuery("#drag").html(respuesta);
        }
      };
      xhttp.open("POST", "your_upload_handler.php", true);  
      xhttp.send(formData);
    return true;
    }
};

Теперь HTML и стили для этого. Я довольно новичок, но все это на самом деле сработало для меня и заняло у меня некоторое время, чтобы понять это.

<div id="form" class="formpos">
<!--    Select the pdf to upload:-->
  <input type="file" name="fileToUpload[]" id="fileToUpload" accept="application/pdf" multiple>
  <div><p id="drag">Drop your files here or click to select them</p>
  </div>
  <button id="submitbtn" onclick="return check()" >Upload</button>
// these inputs are passed with different names on the formdata. Be aware of that
// I was echoing this, so that's why I use the single quote for php variables
  <input type="hidden" id="fecha" name="fecha_copy" value="'.$fecha.'" />
  <input type="hidden" id="vendor" name="vendorname" value="'.$vendor.'" />
  <input type="hidden" id="sku" name="sku" value="'.$sku.'"" />
</div>
<h1 style="width: 500px!important;margin:20px auto 0px!important;font-size:24px!important;">File list:</h1>
<div id="filelist" style="width: 500px!important;margin:10px auto 0px!important;">Nothing selected yet</div>

Стили для этого. Я должен был отметить некоторые из них! Важные, чтобы переопределить поведение Joomla.

.formpos{
  width: 500px;
  height: 200px;
  border: 4px dashed #999;
  margin: 30px auto 100px;
 }
.formpos  p{
  text-align: center!important;
  padding: 80px 30px 0px;
  color: #000;
}
.formpos  div{
  width: 100%!important;
  height: 100%!important;
  text-align: center!important;
  margin-bottom: 30px!important;
}
.formpos input{
  position: absolute!important;
  margin: 0!important;
  padding: 0!important;
  width: 500px!important;
  height: 200px!important;
  outline: none!important;
  opacity: 0!important;
}
.formpos button{
  margin: 0;
  color: #fff;
  background: #16a085;
  border: none;
  width: 508px;
  height: 35px;
  margin-left: -4px;
  border-radius: 4px;
  transition: all .2s ease;
  outline: none;
}
.formpos button:hover{
  background: #149174;
  color: #0C5645;
}
.formpos button:active{
  border:0;
}

Надеюсь, это поможет.

ответил Eric 6 MaramTue, 06 Mar 2018 05:46:32 +03002018-03-06T05:46:32+03:0005 2018, 05:46:32
0

Возможно, есть более элегантный способ сделать это, но вот мое решение. С помощью Jquery

fileEle.value = "";
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
parEle.append(newEle);

В основном вы очищаете значение ввода. Клонируйте его и поместите клон на место старого.

ответил Nicholas Anderson 11 Maypm16 2016, 22:43:51
0

Если вам посчастливилось отправить запрос в базу данных с файлами, и у вас есть файлы, которые вы хотите отправить в DOM

вы можете просто проверить, присутствует ли файл в списке файлов в вашем DOM, и, конечно, если это не так, вы просто не отправляете этот элемент в de DB.

ответил Neku80 30 FriEurope/Moscow2016-12-30T13:04:34+03:00Europe/Moscow12bEurope/MoscowFri, 30 Dec 2016 13:04:34 +0300 2016, 13:04:34
0

Вы можете создать массив и использовать его вместо списка файлов только для чтения.

var myReadWriteList = new Array();
// user selects files later...
// then as soon as convenient... 
myReadWriteList = FileListReadOnly;

После этого выполните загрузку в свой список вместо встроенного списка. Я не уверен в контексте, в котором вы работаете, но я работаю с плагином jquery, который нашел, и мне нужно было взять исходный код плагина и поместить его на страницу, используя <script> теги. Затем над источником я добавил свой массив, чтобы он мог действовать как глобальная переменная, а плагин мог ссылаться на него.

Тогда это был просто вопрос обмена ссылками.

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

:))

ответил cary abramoff 23 MarpmWed, 23 Mar 2011 23:06:22 +03002011-03-23T23:06:22+03:0011 2011, 23:06:22
0

Я просто изменил тип ввода на текст и вернулся в файл: D

ответил maLikiz 17 J000000Tuesday18 2018, 16:18:11

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132