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

我在一个页面上工作，它接受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>

水稻叶色分类
图1
图2
图3
图4
图5
图6
图7
图8
图9
图10
比较
$（文档）.ready（函数（）{
//处理文件img的函数
功能手柄文件选择1（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//仅图像文件
如果（！f.type.match（'image.*）{continue；}
//实例文件redaer API
var reader=new FileReader（）；
//读取文件
reader.onload=（函数（文件）{
返回函数（e）{
//将图像附加到ID img1
$（'#img1'）.attr（'src'，e.target.result）.attr（'title'，theFile.name）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
//fungsi utk句柄文件img
功能手柄文件选择2（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//汉雅档案馆
如果（！f.type.match（'image.*）{continue；}
//实例文件redaer API
var reader=new FileReader（）；
//baca文件komputer yg sdh dipilih博士
reader.onload=（函数（文件）{
//tempel文件gambar yg dipilih ke ID img2
返回函数（e）{
$（'#img2'）.attr（'src'，e.target.result）.attr（'title'，theFile.name）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
功能手柄文件选择3（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//仅图像文件
如果（！f.type.match（'image.*）{continue；}
//实例文件redaer API
var reader=new FileReader（）；
//读取文件
reader.onload=（函数（文件）{
返回函数（e）{
//将图像附加到ID img1
$（'#img3'）.attr（'src'，e.target.result）.attr（'title'，theFile.name）；
};
})（f） )；
//佩里塔坎大学
reader.readAsDataURL（f）；
}
}
功能手柄文件选择4（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//仅图像文件
如果（！f.type.match（'image.*）{continue；}
//实例文件redaer API
var reader=new FileReader（）；
//读取文件
reader.onload=（函数（文件）{
返回函数（e）{
//将图像附加到ID img1
$（'#img4'）.attr（'src'，e.target.result）.attr（'title'，theFile.name）；
};
})（f） )；
//佩里塔坎大学
reader.readAsDataURL（f）；
}
}  
功能手柄文件选择5（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//仅图像文件
如果（！f.type.match（'image.*）{continue；}
//实例文件redaer API
var reader=new FileReader（）；
//读取文件
reader.onload=（函数（文件）{
返回函数（e）{
//将图像附加到ID img5
$（'#img5'）.attr（'src'，e.target.result）.attr（'title'，theFile.name）；
};
})（f） )；
//佩里塔坎大学
reader.readAsDataURL（f）；
}
}
功能手柄文件选择6（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
//仅图像文件
如果（！f.type.match（'image.*）{continue；}
return new Promise( (resolve, reject ) => {

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

        resolve( CallbackToUpload)

    reject ( ' Not enough images!')

})