He,
Im working on multi image upload, what im doing is on choosing images i display preview of all images then i submit all data.
My HTML:
<input type="file" id="newimage" name="newimage" multiple="" accept=".jpg,.jpeg,.png" class="inputfile" onchange="readURLNEW(this,'5');">
My JS:
function readURLNEW(input,cnt) {
if (input.files) {
var dispimgcnt = $('.singleImageCanvasContainer').length;
var filesAmount = input.files.length;
var total = filesAmount + dispimgcnt;
var imagesLoaded = 0;
if(total <= cnt)
{
$('.preloader').show();
for (i = 0; i < filesAmount; i++) {
var j = 1;
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
image.onload = function (imageEvent) {
var canvas = document.createElement('canvas'),
max_size = 500,// TODO : max size for a pic
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var blob = dataURLToBlob(dataUrl);
var icnt = dispimgcnt > 0 ? (dispimgcnt + j) : j;
var data = new FormData();
data.append('file', blob);
$.ajax({
url : "tempsave.php",
type: 'POST',
data: data,
async:false,
contentType: false,
processData: false,
success: function(data) {
if($('.singleImageCanvasContainer').length <= 0)
display = 'block';
var div = $("<div class='singleImageCanvasContainer pimage' id='singleImageCanvasContainer"+(icnt)+"' style='display: inline-block;position: relative;margin-right:5px;margin-top: 10px;' > <button type='button' class='singleImageCanvasCloseBtn' style='position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;left: 78%;'>"
+"<i class='fa fa-bars'></i>"
+"<div class='dropdown-content' style='display:none'><a href='#' class='main_pic' style='display:'>Set as main picture</a><a href='#' class='crop_pic'>Crop</a><a href='#' class='delete_pic'>Delete</a></div>"
+"</button><button type='button' class='singleImageCanvasMainBtn' style='display:"+display+";position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;display: '><i class='fa fa-check'></i></button>"
+"<img style='border-radius:20px; height: 150px;width: 150px;border:1px solid lightgray' src='"+data+"' class='file-img img-loading'></div>"
);
$('div.imgcontainer').append(div);
imagesLoaded++;
if(imagesLoaded == filesAmount){
allLoaded();
}
},
error: function() {
$('.preloader').hide();
alert("Failed!");
}
});
j++;
}
image.src = e.target.result;
};
reader.readAsDataURL(input.files[i]);
}
}
}
} My Problem is on submitting form using slow network(mobile network) it is very slow.
The weird timing scenario on choosing images:
1. if i choose five 5mb images at same time (server uploading time is 94seconds)
2. if i choose four 5mb image first, then i choose one 5mb image separatly(server uploading time is 37 seconds)
3. if i choose one 5mb image, then another 5mb image like this i choose five 5mb separatly then (server uploading time is 16 seconds)
did anyone faced this scenario? did i do anything wrong in js, because in php i just save images in folder and data in DB, so there is no issues in php side(its basic code only).
in js, i used render.onload and image.onload and ajax call, is there any issues lying there? please help!!