I'm trying to write a multi upload image logic. This is the code i use:
function readURL(input,index) {
for (var z = 0; z < input.files.length; z++) {
var FileZ=input.files[z];
if (input.files && input.files[z]) {
var reader = new FileReader();
reader.onload = function (e) {
var i = new Image();
i.src=e.target.result;
i.onload = function(){
//ajax crop to 500x350
var arrExt = FileZ.name.split('.');
if(i.width>=500 && i.height>=350) {
$.ajax({
url: 'ajax/cropImage.php',
type: 'POST',
data: 'base64='+e.target.result+"&ext="+arrExt[(arrExt.length-1)],
success: function(data) {
//here i insert the image in html.
}
});
} else {
alert("Image too big");
}
};
}
reader.readAsDataURL(input.files[z]);
}
}
}
This code works correctly, i can upload and see after ajaxCrop.php the resulting images. The problem comes when i try to upload image with different extensions. If i try to upload one jpg and one png, only one of this photo will be cropped. The problem is in
var arrExt = FileZ.name.split('.');
Here the file name is always the same, at z=0 name='image.jpg' and at z=1 name='image.jpg' (the name should be 'image.png'). So i get an error when i try to crop a 'false' jpg... How i can get the correct 'name at index'?