Entfernen spezifische Dateiform mehrere Dateieingabe

ich implementiert eine folgende HTML <input> mehrere AttributeEntfernen spezifische Dateiform mehrere Dateieingabe

<input type="file" name="R" id="someattachId" multiple="multiple" style='display:none' />

Ich versuche, bestimmte Artikel in ihm entfernen folgenden Code

$('#someattachId')[0].files[fileId].remove();

aber es kann nicht entfernen Sie es.

Quelle

2017-02-24 kez

Sie können nicht: https://stackoverflow.com/questions/16943605/remove-a-filelist-item-from-a-multiple-inutfile –

Versuchen Sie diesen Ansatz: http://StackOverflow.com/Questions/ 19060378/how-to-remove-eine-spezifische-ausgewählte-Datei-von-Eingabe-Datei-Steuerelement –

@ DanielLagiň Wie kann ich dann auf die thos-Datei 'validatedFiles' auf der Serverseite dann zugreifen – kez

Nein, wir können es entfernbar machen. Ich habe das implementiert und es funktioniert definitiv.

Zuerst müssen Sie diese Variablen

var newImageObj = []; 
var ImageNo = 0;

Dann diesen Code auf Änderung initialisieren Datei Eingang des

$("#exampleInputFileProduct").change(function() { 

      var fileUpload = document.getElementById("exampleInputFileProduct"); 

      //$("#mainImages").html(''); 
      //$("#subImages").html(''); 

      if (typeof (FileReader) != "undefined") { 

       //Here Check File Extension 
       var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/; 


       for (var i = 0; i < fileUpload.files.length; i++) { 
        var j = 0; 
        var file = fileUpload.files[i]; 
        var NewFile = fileUpload.files[i]; 
        //Here Check File Size 1MB = 1000000 Bytes 
        if (file.size < 2048000) { 
         if (regex.test(file.name.toLowerCase())) { 
          var reader = new FileReader(); 
          reader.onload = function (e) { 

           if ($("#mainImages").find(".item").attr("id") == "FirstSlider") { 
            $("#mainImages").html(''); 
            $("#subImages").html(''); 
            $("#subImages").append("<div class='item active'></div>"); 
           } 

           if ($("#mainImages").find(".item").hasClass("active")) { 
            $("#mainImages").append("<div class='item " + ImageNo + "_CClass\'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>"); 
           } else { 
            $("#mainImages").append("<div class='item active " + ImageNo + "_CClass'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>"); 
           } 

           //if ($("#subImages").find(".item").length == 0) { 
           // $("#subImages").append("<div class='item active'></div>"); 
           //} else { 
           if (($("#subImages").find(".item").find("div").length/5) >= $("#subImages").find(".item").length) { 
            $("#subImages").append("<div class='item'></div>"); 
           } 
           //} 

           var append = 0; 

           $.each($("#subImages").find(".item"), function (p, pelement) { 
            if (append == 0) { 
             if ($(pelement).find("div").length != 5) { 
              var newID = $(pelement).find("div").length; 
              newID = newID; 
              $(pelement).append("<div onclick='LoadImage(\"" + ImageNo + "_CClass\")' data-slide-to='" + newID + "' class='thumb " + ImageNo + "_CClass'> <img src='" + e.target.result + "' alt=''></div>"); 
              append = append + 1; 
             } 
            } 
           }) 

           j = j + 1; 

           ImageNo = ImageNo + 1; 
          } 

          newImageObj.push(file); 

          reader.readAsDataURL(file); 
         } 
        } 
       } 
      } else { 
       alert("This browser does not support HTML5 FileReader."); 
      } 
     });

Dann endlich schreiben diese zwei Funktionen helfen, den Rest

function LoadImage(objclass) { 
      $("#mainImages").find(".item").removeClass("active"); 
      $("#mainImages").find("." + objclass + "").addClass("active"); 
     } 

     function RemoveImage(objclass, ImageName) { 

      $.each(newImageObj, function (e, element) { 
       if ($(this)[0].name.toLowerCase().trim() == ImageName.trim()) { 
        newImageObj.pop(this); 
       } 
      }); 

      $("#mainImages").find("." + objclass + "").remove(); 
      $("#subImages").find(".item").find("." + objclass + "").remove(); 

      if ($("#mainImages").find(".item").length == 0) { 
       $("#mainImages").append("<div class='item active'><i class='fa fa-times customIcon'></i><img class='CImage' src='/Content/img/DefaultProduct.gif' alt='' /></div>"); 
       $("#subImages").append("<div class='item active'><div data-target='#carousel' data-slide-to='0' class='thumb'> <img src='/Content/img/DefaultProduct.gif' alt=''></div></div></div>"); 
      } else { 
       $("#mainImages").find(".item").removeClass("active"); 
       $("#mainImages").find(".item:first-child").addClass("active"); 
       $("#subImages").find(".item").removeClass("active"); 
       $("#subImages").find(".item:first-child").addClass("active"); 
      } 
     }

zu tun

Endlich, wenn Sie Ihr Formular absenden, nehmen Sie die Dateien aus dem Array

Quelle

2017-02-24 12:45:52 Tracker

Entfernen spezifische Dateiform mehrere Dateieingabe

Antwort

Verwandte Themen