Javascript 同一页面上多个图像上传按钮的jquery

我使用PHP表单，其中我想提交带有多个图像上传按钮的表单。 在我的页面中有许多多个上传按钮。我想对所有具有不同名称和id的多个图像上传按钮使用相同的jquery

我的代码是：

  <input type="file" id="files" name="dog_img[]" class="upload-img" onchange="readURL(this);" multiple>

   <input type="file" id="files1" name="dog_img1[]" class="upload-img" onchange="readURL(this);" multiple>

   <input type="file" id="files2" name="dog_img2[]" class="upload-img" onchange="readURL(this);" multiple>

  <input type="file" id="files3" name="dog_img3[]" class="upload-img" onchange="readURL(this);" multiple>

Jquery代码是：

     $(document).ready(function() {
     $('.upload-img').change(function () {
     var co =0;
     var len =5;

   for (var i=0; i < len; i++)
   {



   (function (j, self) 
    {

     var reader = new FileReader()
     reader.onload = function (e) {
     var image = new Image();
     image.src = e.target.result;
     image.onload = function () {
     var height = this.height;
     var width = this.width;
      if (height < 700 || width < 1000) {
       alert("Height and Width must not exceed 1024px.");
      return false;
   }
  };
   co++;
  $('.gallery-row').append('<div class="col-md-2" id="pip">
   <span id="'+[co]+'" data-id="'+[co]+'" class="click-form">
     <img class="imageThumb" src="' + e.target.result 
     + '"/>' + '</span><span data-id="'+[co]+'" class="remove">X
       </span></div>');

}

    reader.readAsDataURL(self.files[j])
    })
    (i, this);
   }

   });
  });

$（文档）.ready（函数（）{
$（'.upload img'）.change（函数（）{
var-co=0；
var-len=5；
对于（变量i=0；i

尝试此代码，您将获得文件长度

        $(document).ready(function() {
     $('.upload-img').bind('change',function () {
     var co =0;
     var len =5;
         var num_of_images =  this.files.length;
        alert(num_of_images);
       for (var i=0; i < len; i++)
       {

       (function (j, self) 
        {

         var reader = new FileReader()
         reader.onload = function (e) {
             var image = new Image();
             image.src = e.target.result;
             image.onload = function () {
       console.log("image",image);
             var height = this.height;
             var width = this.width;
              if (height < 700 || width < 1000) {
               alert("Height and Width must not exceed 1024px.");
              return false;
           }
          };
           co++;
              $('.gallery-row').append('<div class="col-md-2" id="pip">            <span id="'+[co]+'" data-id="'+[co]+'" class="click-form">                <img class="imageThumb" src="' + e.target.result + '"/>' + '</span><span data-id="'+[co]+'" class="remove">X </span></div>');
            reader.readAsDataURL(self.files[j])
            }


        })
        (i, this);
       }

       });
  });

$（文档）.ready（函数（）{
$（'.upload img'）.bind（'change'，function（）{
var-co=0；
var-len=5；
var num_of_images=this.files.length；
警报（图像的数量）；
对于（变量i=0；i

---

我改变了这个

var num\u of_images=this.files.length

而不是

var num\u of_images=$（“.upload img”）[0].files.length

更新的小提琴

你能创建一个小提琴吗？不，我想通过同一个屏幕显示所有上传图像的预览function@varsha，小提琴更新。现在检查好的。。。我的代码出了什么问题？我更改了这个
var num\u of\u images=this.files.length
而不是
var num\u of_images=$（“.upload img”）[0].files.length工作正常吗？