Question

我在上传图片时使用JavaScript来获取所选的文件扩展名。但是我想设置限制只在一个select中上传四个图片。我已经启用了multiple属性来选择多个图像。如何设置上传限制一次只有四个文件。我的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');
   }
});

Demo

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

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

具有多个选择的Jquery图像上传限制

2 个答案: