Jquery图片上传限制多选

Question

我在上传图片时使用 JavaScript 来获取选定的文件扩展名。但我想设置限制以在一次选择中只上传四张图片。我启用了多属性来选择多张图片。如何设置限制只上传四个文件一次。我获取选定文件扩展名的 JavaScript 代码就像：-

$(document).ready(function(){
  $('#fileupload').change(function(){
   var ext = $(this).val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
        alert("Please select an image.Only (gif, png, jpg, jpeg) types are allowed");
        return false;
      }
   });
});

我的 html 表单就像：-

<form method="POST">
  <input id="fileupload" class="image" type="file" name="files[]" multiple>
</form>

Answer 1

据我所知，您需要在上传多个文件时限制文件数量，您可以使用一个小的 javascript 在客户端验证这一点。 您所需要的只是访问用于上传图像的输入框的length属性。

HTML：

<form method="POST">
    <input id="fileupload" class="image" type="file" name="files[]" multiple="" />
    <div class="validation" style="display:none;"> Upload Max 4 Files allowed </div>
</form>

Javascript：

$('#fileupload').change(function(){
   //get the input and the file list
   var input = document.getElementById('fileupload');
   if(input.files.length>4){
       $('.validation').css('display','block');
   }else{
       $('.validation').css('display','none');
   }
});

演示

您仅允许上传图像文件的其他文件扩展名验证保持不变。

Answer 2

您可以使用上面的@lucky 建议，并添加一个禁用按钮功能以仅在满足此类条件时显示。

$('#fileupload').change(function(){
   //get the input and the file list
   var input = document.getElementById('fileupload');
   if(input.files.length>4){
       $('.validation').css('display','block');
       $('#someid').prop('disabled', true);
   }else{
       $('.validation').css('display','none');
   }
});