我正在处理一个页面，它接受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个单个上传标签，并在脚本上逐个处理它们。如何上传任意数量的图像，它仍然可以由我制作的脚本处理？
答案 0 :(得分：0)
我会创建Promise函数并仅在图像数为10时解析。 让UploadFunction =（）=＆gt; {
return new Promise( (resolve, reject ) => {
if(document.querySelectorAll('img').length == 10 ){
resolve( CallbackToUpload)
}其他{
reject ( ' Not enough images!')
}
})
}