Question

如果达到最大上传限制，我想清除所有上传的图片。如果我使用浏览按钮上传图片，它会显示我上传的所有图片。但我想要实现的是，如果我上传更多4照片然后它应该重置所有上传的照片或不应该允许用户在第一个地方加载超过4张照片。在我的情况下，如果我超过4张照片。

我的Html。

<div class="form-group">
   <label class="col-sm-4 control-label text_left">Upload Image(s)</label>
   <div class="col-sm-8">
      <div>
         <input type="file" id="files" name="media" multiple accept="image/*" />
         <output id="list"></output>
      </div>
   </div>
</div>

我的剧本..

$(function(){
    $('#files').change(function(){
       var $fileUpload = $("input[type='file']");
       if (parseInt($fileUpload.get(0).files.length)>4){
           alert("You can only upload a maximum of 4 files");
           ("#files").replaceWith($("#files").val('').clone(true));
           ("#files")[0].value = "";
       }
    });
});

请帮帮我。

Answer 1

您不需要replaceWith。一个简单的.val("")将清除file input。

＆＃13;

$("#upl").on("change", function() {
  if ($("#upl").get(0).files.length > 4) {
    alert("You cant upload more than 4 files.");
    $("#upl").val("");
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="upl" multiple/>

＆＃13;

Answer 2

FileList是只读的。无法设置或删除代表.files对象的<input type="file">元素的FileList属性中的项目。 parseInt()调用不是必需的，.files.length返回一个整数。

如果您尝试将上传限制为四个用户选择的文件，则可以迭代.files，仅将前四个文件追加到FormData对象，然后将FormData发布到服务器。

var limit = 4;

$(":file").on("change", function() {
    var n = 0;
    var fd = new FormData();
    for (let file of this.files) {
      fd.append("file" + n++, file);
      if (n === limit) break;
    }
    console.log(Array.from(fd.keys()).length);
    for (let [key, prop] of fd.entries()) {
      console.log(key, prop)
    }
    // $.post("/path/to/server", fd)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label class="col-sm-4 control-label text_left">Upload Image(s)</label>
   <div class="col-sm-8">
      <div>
         <input type="file" id="files" name="media" multiple accept="image/*" />
         <output id="list"></output>
      </div>
   </div>
</div>

可选地

if (this.files.length > 4) {
  // do nothing
} else {
  // do stuff with files
}

如果达到maxium用户上传限制，如何清除所有imges？

2 个答案: