Wie entferne ich eine Datei aus der Dateiliste

StackOverflow https://stackoverflow.com/questions/3144419

Frage

Ich baue eine Drag-and-Drop-to-Upload-Web-Anwendung HTML5 verwenden, und ich bin die Dateien auf einen div fallen und natürlich das Objekt datatransfer zu holen, die mir die Liste der Dateien

Jetzt möchte ich einige der Dateien entfernen, aber ich weiß nicht wie, oder ob es überhaupt möglich.

Vorzugsweise würde Ich mag nur sie von der Dateiliste löschen; Ich habe für sie keine Verwendung habe. Aber wenn das nicht möglich ist, soll ich schreiben stattdessen in überprüft in Code, interagiert mit dem Filelist? Das scheint umständlich.

War es hilfreich?

Lösung

Wenn Sie nur einige der ausgewählten Dateien löschen möchten: Sie können es nicht. Die File API Working Draft verknüpft enthält eine Anmerkung:

Die HTMLInputElement Schnittstelle [HTML5] hat eine Nur-Lese FileList Attribut, [...]
[Hervorhebung von mir]

ein wenig von der HTML 5 Working Draft Lesen, stieß ich auf die Gemeinsame input Element APIs . Es scheint, können Sie die gesamte Dateiliste, indem die value Eigenschaft des input Objekts auf eine leere Zeichenfolge löschen, wie: 

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

BTW, der Artikel , um Dateien von Web-Anwendungen auch von Interesse sein könnte.

Andere Tipps

hat diese Frage bereits beantwortet markiert, aber ich mag einige Informationen teilen, dass könnte helfen, andere mit der Verwendung von Dateiliste.

Es wäre zweckmäßig, eine Dateiliste als Array zu behandeln, aber Methoden wie Art, verschiebung, Pop, und in Scheiben schneidet nicht funktionieren. Wie andere vorgeschlagen haben, können Sie die Dateiliste in ein Array kopieren. Anstatt jedoch eine Schleife verwenden, gibt es eine einfache Lösung einer Zeile um diese Umwandlung zu behandeln. 

 // 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;
 });

Getestet OK in FF, Chrome und Internet Explorer 10 +

Wenn Sie immergrüne Browser ausrichten (Chrome, Firefox, Rand, sondern arbeitet auch in Safari 9+) oder Sie können einen polyfill leisten, können Sie die Dateiliste in ein Array drehen durch Array.from() wie folgt aus: 

let fileArray = Array.from(fileList);

Dann ist es einfach, die Anordnung von Files wie jedes andere Array zu behandeln.

Da wir in dem HTML5-Bereich sind, ist dies meine Lösung. Der Kern ist, dass Sie die Dateien in ein Array statt so dass sie in einer Dateiliste schieben, dann XHR2 verwenden, drücken Sie die Dateien in ein Formdata-Objekt. Beispiel unten. 

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."));

Ich habe sehr schnelle und kurze Abhilfe für diesen gefunden. Getestet in vielen gängigen Browsern (Chrome, Firefox, Safari);

Zuerst müssen Sie Dateiliste in ein Array

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

das besondere Element Verwendung dieses

löschen 
newFileList.splice(index,1);

Ich weiß, das ist eine alte Frage, aber es ist High Ranking in der Suchmaschinen in Bezug auf dieses Thema.

Eigenschaften in der Liste der Dateien Objekt kann nicht gelöscht werden, aber zumindest auf Firefox können sie geändert werden . Meine Abhilfe Dieses Problem war eine Eigenschaft IsValid=true auf diese Dateien hinzufügen, die Kontrolle und IsValid=false die übergeben, die nicht.

dann durch die Liste, die ich nur Schleife, um sicherzustellen, dass nur die Eigenschaften mit IsValid=true werden zu Formdata .

Es könnte ein eleganter Weg, dies zu tun, aber hier ist meine Lösung. Mit JQuery 

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

Im Grunde Klampe Sie den Wert des Eingangs. Clone es und setzen Sie den Klon anstelle der alten.

Das ist extemporary, aber ich hatte das gleiche Problem, das ich auf diese Weise gelöst. In meinem Fall war das Hochladen mir die Dateien über XMLHttp Anfrage, so dass ich die Dateiliste geklonten Daten über Formulardaten Anfügen schreiben konnte. Funktionalität ist, dass Sie per Drag & Drop oder mehrere Dateien so oft wählen, wie Sie (Auswählen von Dateien wieder wird die geklonte Dateiliste nicht zurückgesetzt) ??möchten, entfernen Sie alle Datei, die Sie aus der (geklont) Dateiliste möchten, und senden über xmlhttprequest was wurde dort gelassen. Das ist, was ich tat. Es ist mein erster Beitrag hier so Code ein wenig chaotisch ist. Es tut uns leid. Ah, und ich hatte jQuery statt $ zu verwenden, wie es in Joomla Skript war. 

// 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;
    }
};

Nun ist die html und Stile für diese. Ich bin ein ziemlich Neuling aber alles dies wirklich für mich gearbeitet und hatte eine Weile gebraucht, um einen Reim darauf machen. 

<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>

Die Stile dafür. Ich musste einige von ihnen markieren! Important Joomla Verhalten außer Kraft zu setzen. 

.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;
}

Ich hoffe, das hilft.

Wenn Sie das Glück haben, einen Beitrag Anfrage an die Datenbank mit den Dateien zu senden und Sie haben die Dateien, die Sie in Ihrem DOM senden möchten

Sie können einfach überprüfen, ob die Datei in der Liste Datei in Ihrem DOM vorhanden ist, und natürlich, wenn es nicht Sie das Element einfach nicht DB de senden.

Danke @Nicholas Anderson einfach und direkt, hier ist der Code angewendet und arbeiten an meinem Code jquery verwenden.

HTML. 

<input class="rangelog btn border-aero" id="file_fr" name="file_fr[]" multiple type="file" placeholder="{$labels_helpfiles_placeholder_file}">
<span style="cursor: pointer; cursor: hand;" onclick="cleanInputs($('#file_fr'))"><i class="fa fa-trash"></i> Empty chosen files</span>

JS CODE 

   function cleanInputs(fileEle){
    $(fileEle).val("");
    var parEle = $(fileEle).parent();
    var newEle = $(fileEle).clone()
    $(fileEle).remove();
    $(parEle).prepend(newEle);
}

Sie können mögen ein Array und Verwendung zu schaffen, dass anstelle der Nur-Lese-Dateiliste. 

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

Nach diesem Punkt tun, um Ihre Upload gegen Ihre Liste anstelle der in der Liste errichtet. Ich bin nicht sicher, ob der Kontext in dem Sie arbeiten, aber ich mit jquery arbeite Plugin Ich fand und was ich tun musste, war die Quelle des Plugin zu nehmen und es auf der Seite <script> Tags. Dann über der Quelle hinzugefügt ich meine Array, so dass es als eine globale Variable handeln kann und das Plugin auf sie verweisen könnte.

Dann war es nur eine Frage der Referenzen auslagern.

ich denke, das Sie auch per Drag hinzufügen erlauben würde, und so wieder sinken, wenn die in der Liste gebaut schreibgeschützt ist dann, wie sonst könnte man die in die Liste abgelegten Dateien erhalten?

:))

ich ändern, nur die Art der Eingabe in den Text und zurück in die Datei: D

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top