删除特定文件形式多文件输入

我实现了一个下面的HTML <input>多个属性删除特定文件形式多文件输入

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

我想用它来除去特定项目下面的代码

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

但它不能去掉它。

来源

2017-02-24 kez

你不能：https://stackoverflow.com/questions/16943605/remove-a-filelist-item-from-a-multiple-inputfile –

尝试这种方法：http://stackoverflow.com/questions/ 19060378/how-to-remove-one-specific-selected-file-from-input-file-control –

@DanielLagiň如何在服务器端访问thos文件'validatedFiles'然后 – kez

不，我们可以使它可移动。我实现了这一点，它的工作原理。

首先，你需要初始化这个变量

var newImageObj = []; 
var ImageNo = 0;

然后写上文件输入的变化该代码

$("#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."); 
      } 
     });

然后在最后这2个功能，将有助于完成剩下的

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

最后当你提交你的表格而不是从数组中获取文件

来源

2017-02-24 12:45:52 Tracker

删除特定文件形式多文件输入

回答

相关问题