I am trying to upload multiple images and place in separate img tag using javascript.Here is what i tried,
MyJsp.jsp :
<div>
<img alt="Image1" id="Image1" src="" width="130px" height="90px"><br><br>
<img alt="Image2" id="Image2" src="" width="130px" height="90px"><br><br>
<img alt="Image3" id="Image3" src="" width="130px" height="90px"><br><br>
<img alt="Image4" id="Image4" src="" width="130px" height="90px"><br><br>
<img alt="Image5" id="Image5" src="" width="130px" height="90px"><br><br>
</div>
<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/ multiple>
<input type="text" id="imginsert" value="1">
MyJS.js :
$(function(){
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// alert("1");
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var count=$('#imginsert').val();
if(count==1){
$('#Image1').attr("src",e.target.result);
$('#imginsert').val('2');
//alert("first :"+e.target.result);
}
else if(count==2)
{
//alert("else if 1");
$('#Image2').attr("src",e.target.result);
$('#imginsert').val('3');
//alert("2 :"+e.target.result);
}
else if(count==3)
{
//alert("else if 2");
$('#Image3').prop("src",e.target.result);
$('#imginsert').val('4');
//alert("3 :"+e.target.result);
}
else if(count==4)
{
$('#Image4').prop("src",e.target.result);
$('#imginsert').val('5');
//alert("4 :"+e.target.result);
}
else if(count==5)
{
$('#Image5').prop("src",e.target.result);
$('#imginsert').val('6');
//alert("5 :"+e.target.result);
}
else
{
alert("You can upload only 5 images.");
}
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
});
If i uploading Img1.jpg,Img2.jpg,Img3.jpg,Img4.jpg,Img5.jpg means the OP is :
Img2.jpg
Img4.jpg
Img1.jpg
Img3.jpg
Img5.jpg
My Expecting OP is :
Img1.jpg
Img2.jpg
Img3.jpg
Img4.jpg
Img5.jpg
where i am doing mistake to place orderly like uploading images order?
readAsDataURL is asynchronous so you can't guarantee that they will finish in any order. Just pass the index of the file to your IIFE with your file
reader.onload = (function(theFile, count) {
return function(e) {
if (count > 5)
{
alert("You can upload only 5 images.");
}
else{
$('#Image'+count).prop("src",e.target.result);
}
};
})(f,i+1);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments