如何在JavaScript中处理来自HTML多输入标记的多个文件？

Question

我正在一个页面上接受10个图像，然后单独处理它们。我希望用户只需一次提交10张图片便利。批量上传。我已经搜索并找到了一种方法来收集HTML上的多个文件，但我看到的所有内容都是从服务器处理它们。它只需要在本地处理图像。我在这里附上我的index.html文件，并附上我用来处理它们的脚本。

<div class="container"> 
     <div class="row"> 
      <center><h2>Rice Leaf Color Classification</h2></center> 

      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 1</h4> 
        <img id="img1" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 1"> 
       <input type="file" name="file1" id="file1" multiple> 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 2</h4> 
        <img id="img2" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 2"> 
       <input type="file" name="file2" id="file2" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 3</h4> 
        <img id="img3" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 3"> 
       <input type="file" name="file3" id="file3" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 4</h4> 
        <img id="img4" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 4"> 
       <input type="file" name="file4" id="file4" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 5</h4> 
        <img id="img5" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 5"> 
       <input type="file" name="file5" id="file5" > 
       </center> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 6</h4> 
        <img id="img6" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 6"> 
       <input type="file" name="file6" id="file6" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 7</h4> 
        <img id="img7" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 7"> 
       <input type="file" name="file7" id="file7" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 8</h4> 
        <img id="img8" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 8"> 
       <input type="file" name="file8" id="file8" > 
       </center> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 9</h4> 
        <img id="img9" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 9"> 
       <input type="file" name="file9" id="file9" > 
       </center> 
      </div> 

      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <center> 
        <h4>Image 10</h4> 
        <img id="img10" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 10"> 
       <input type="file" name="file10" id="file10" > 
       </center> 
      </div> 
      </div> 
      </div> 
     </div> 

      <center><button id="compare" class="btn btn-primary btn-xs">Compare</button></center> 
      <div class="row"> 
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div id="result_comparation"></div> 
       </div> 
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> 
      </div> 
    </div> 

</body> 
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/rgbaster.js"></script> 
<script> 
    $(document).ready(function() { 
     // function for handle file img 
     function handleFileSelect1 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img1 
        $('#img1').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 

       reader.readAsDataURL(f); 
      } 
     } 
     // fungsi utk handle file img 
     function handleFileSelect2 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
      // hanya file gambar saja 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // baca file dr komputer yg sdh dipilih 
       reader.onload = (function(theFile){ 
        // tempel file gambar yg dipilih ke ID img2 
        return function (e) { 
        $('#img2').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 

       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect3 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img1 
        $('#img3').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect4 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img1 
        $('#img4').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect5 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img5 
        $('#img5').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect6 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img6 
        $('#img6').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect7 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img7 
        $('#img7').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect8 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img8 
        $('#img8').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect9 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img9 
        $('#img9').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 

     function handleFileSelect10 (evt) { 
      var files = evt.target.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       // only image file 
       if (!f.type.match('image.*')) {continue;} 
       // instance file redaer API 
       var reader = new FileReader(); 
       // read file 
       reader.onload = (function(theFile){ 
        return function (e) { 
        // append image to ID img10 
        $('#img10').attr('src', e.target.result).attr('title', theFile.name); 
        }; 
       })(f); 
       // perintahkan utk 
       reader.readAsDataURL(f); 
      } 
     } 


     //add event when file is added. 
     document.getElementById('file1').addEventListener('change', handleFileSelect1, false); 
     document.getElementById('file2').addEventListener('change', handleFileSelect2, false); 
     document.getElementById('file3').addEventListener('change', handleFileSelect3, false); 
     document.getElementById('file4').addEventListener('change', handleFileSelect4, false); 
     document.getElementById('file5').addEventListener('change', handleFileSelect5, false); 
     document.getElementById('file6').addEventListener('change', handleFileSelect6, false); 
     document.getElementById('file7').addEventListener('change', handleFileSelect7, false); 
     document.getElementById('file8').addEventListener('change', handleFileSelect8, false); 
     document.getElementById('file9').addEventListener('change', handleFileSelect9, false); 
     document.getElementById('file10').addEventListener('change', handleFileSelect10, false); 

     //compare 2 image 
     $('#compare').click(function(event) { 

      //classification function problem 
     function classify (a, b){ 
      var grade; 
        if (a >= 87 && b >= 115.5){ 
          return grade = 2; 
         } else if (a > 72 && b > 108){ 
          return grade = 2.5; 
         } else if (a >=60 && b >= 99){ 
          return grade = 3; 
         } else if (a > 54 && b > 90){ 
          return grade = 3.5; 
         } else if (a >= 50.5 && b >= 85){ 
          return grade = 4; 
         } else if (a > 44 && b > 80){ 
          return grade = 4.5; 
         } else { 
          return grade = 5; 
         } 
     } 
      // add variable 
      var r1, g1, b1, grd1; 
      var r2, g2, b2, grd2; 
      var r3, g3, b3, grd3; 
      var r4, g4, b4, grd4; 
      var r5, g5, b5, grd5; 
      var r6, g6, b6, grd6; 
      var r7, g7, b7, grd7; 
      var r8, g8, b8, grd8; 
      var r9, g9, b9, grd9; 
      var r10, g10, b10, grd10; 
      // read ID of img element 
      var img1 = document.getElementById('img1'); 
      var img2 = document.getElementById('img2'); 
      var img3 = document.getElementById('img3'); 
      var img4 = document.getElementById('img4'); 
      var img5 = document.getElementById('img5'); 
      var img6 = document.getElementById('img6'); 
      var img7 = document.getElementById('img7'); 
      var img8 = document.getElementById('img8'); 
      var img9 = document.getElementById('img9'); 
      var img10 = document.getElementById('img10'); 

      // image 1 
      RGBaster.colors(img1, { 
       success: function (payload1) { 
        console.log('image1 rgb', payload1.makeRGBobj); 
        r1 = payload1.makeRGBobj.r; 
        g1 = payload1.makeRGBobj.g; 
        b1 = payload1.makeRGBobj.b; 
        grd1 = classify(r1, g1); 

      RGBaster.colors(img2, { 
       success: function (payload2) { 
        console.log('image2 rgb', payload2.makeRGBobj); 
        r2 = payload2.makeRGBobj.r; 
        g2 = payload2.makeRGBobj.g; 
        b2 = payload2.makeRGBobj.b; 
        grd2 = classify(r2, g2); 

      RGBaster.colors(img3, { 
       success: function (payload3) { 
        console.log('image3 rgb', payload3.makeRGBobj); 
        r3 = payload3.makeRGBobj.r; 
        g3 = payload3.makeRGBobj.g; 
        b3 = payload3.makeRGBobj.b; 
        grd3 = classify(r3, g3); 

      RGBaster.colors(img4, { 
       success: function (payload4) { 
        console.log('image4 rgb', payload3.makeRGBobj); 
        r4 = payload4.makeRGBobj.r; 
        g4 = payload4.makeRGBobj.g; 
        b4 = payload4.makeRGBobj.b; 
        grd4 = classify(r4, g4); 

      RGBaster.colors(img5, { 
       success: function (payload5) { 
        console.log('image5 rgb', payload5.makeRGBobj); 
        r5 = payload5.makeRGBobj.r; 
        g5 = payload5.makeRGBobj.g; 
        b5 = payload5.makeRGBobj.b; 
        grd5 = classify(r5, g5); 

      RGBaster.colors(img6, { 
       success: function (payload6) { 
        console.log('image6 rgb', payload6.makeRGBobj); 
        r6 = payload6.makeRGBobj.r; 
        g6 = payload6.makeRGBobj.g; 
        b6 = payload6.makeRGBobj.b; 
        grd6 = classify(r6, g6); 

      RGBaster.colors(img7, { 
       success: function (payload7) { 
        console.log('image7 rgb', payload7.makeRGBobj); 
        r7 = payload7.makeRGBobj.r; 
        g7 = payload7.makeRGBobj.g; 
        b7 = payload7.makeRGBobj.b; 
        grd7 = classify(r7, g7); 

      RGBaster.colors(img8, { 
       success: function (payload8) { 
        console.log('image8 rgb', payload8.makeRGBobj); 
        r8 = payload8.makeRGBobj.r; 
        g8 = payload8.makeRGBobj.g; 
        b8 = payload8.makeRGBobj.b; 
        grd8 = classify(r8, g8); 

      RGBaster.colors(img9, { 
       success: function (payload9) { 
        console.log('image9 rgb', payload9.makeRGBobj); 
        r9 = payload9.makeRGBobj.r; 
        g9 = payload9.makeRGBobj.g; 
        b9 = payload9.makeRGBobj.b; 
        grd9 = classify(r9, g9); 
        // image 2 
        RGBaster.colors(img10, { 
         success: function (payload10) { 
          console.log('image10 rgb', payload10.makeRGBobj); 
          r10 = payload10.makeRGBobj.r; 
          g10 = payload10.makeRGBobj.g; 
          b10 = payload10.makeRGBobj.b; 
          grd10 = classify(r10, g10); 

          /* count rgb differences between two image 
          var result_r = r1 - r2; 
          var result_g = g1 - g2; 
          var result_b = b1 - b2; */ 

          // compute average append to id #result_comparation 
          var aveGrd = ((grd1+grd2+grd3+grd4+grd5+grd6+grd7+grd8+grd10)/9).toFixed(1); 

          var resultCount = "<table id='t01'><tr><th>Image</th><th> RGB </th> <th> Grade </th> </tr>" 
              + "<tr><td>1</td><td>"+payload1.dominant+"</td><td>"+grd1+"</td><tr>" 
              + "<tr><td>2</td><td>"+payload2.dominant+"</td><td>"+grd2+"</td><tr>" 
              + "<tr><td>3</td><td>"+payload3.dominant+"</td><td>"+grd3+"</td><tr>" 
              + "<tr><td>4</td><td>"+payload4.dominant+"</td><td>"+grd4+"</td><tr>" 
              + "<tr><td>5</td><td>"+payload5.dominant+"</td><td>"+grd5+"</td><tr>" 
              + "<tr><td>6</td><td>"+payload6.dominant+"</td><td>"+grd6+"</td><tr>" 
              + "<tr><td>7</td><td>"+payload7.dominant+"</td><td>"+grd7+"</td><tr>" 
              + "<tr><td>8</td><td>"+payload8.dominant+"</td><td>"+grd8+"</td><tr>" 
              + "<tr><td>9</td><td>"+payload9.dominant+"</td><td>"+grd9+"</td><tr>" 
              + "<tr><td>10</td><td>"+payload10.dominant+"</td><td>"+grd10+"</td><tr>" 
              +"<h3>The average grade of this quadrant is: "+aveGrd+"</h3><br>"; 

              /*"<P> RGB IMG 1 : "+payload1.dominant+"Grade: "+grd1+"</P>" 
              +"<p>RGB IMG 2 : "+payload2.dominant+"Grade: "+grd2+"</p>" 
              +"<p>RGB IMG 3 : "+payload3.dominant+"Grade: "+grd3+"</p>" 
              +"<p>RGB IMG 4 : "+payload4.dominant+"Grade: "+grd4+"</p>" 
              +"<p>RGB IMG 5 : "+payload5.dominant+"Grade: "+grd5+"</p>" 
              +"<p>RGB IMG 6 : "+payload6.dominant+"Grade: "+grd6+"</p>" 
              +"<p>RGB IMG 7 : "+payload7.dominant+"Grade: "+grd7+"</p>" 
              +"<p>RGB IMG 8 : "+payload7.dominant+"Grade: "+grd8+"</p>" 
              +"<p>RGB IMG 10 : "+payload10.dominant+"Grade: "+grd10+"</p>" 
              +"<h3>The average grade of this quadrant is: "+aveGrd+"</h3><br>"; */ 
          $('#result_comparation').html(resultCount); 
                         } 
                        }); 
                       } 
                      }); 
                     } 
                    }); 
                   } 
                  }); 
                 } 
                }); 
               } 
              }); 
             } 
            }); 
           } 
          }); 
         } 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 
</html> 

因此，您可以看到我只在HTML部分中放置了10个单一上传标签，并在脚本上逐一处理它们。如何上传任意数量的图片，并且仍可以通过我制作的脚本进行处理？

Answer 1

我会创造无极功能和解决只有当图像数10 让UploadFunction =（）=> {

return new Promise((resolve, reject) => { 

    if(document.querySelectorAll('img').length == 10){ 

     resolve(CallbackToUpload) 

}其他{

reject (' Not enough images!') 

}

}) 

}