mutliple image upload problem
hey guys,
i've been working on a multiple image uploaded but i'm having trouble running the script when selecting multiple images as it will only upload 2/3 out of 9 images for some strange reason
when i try to upload files singularly then all 9 will upload perfectly.
i'm getting no errors in my server log also, so it must be something wrong with my script somewhere if someone can point out where I'm going wrong please.
when user selects image(s)
i've been working on a multiple image uploaded but i'm having trouble running the script when selecting multiple images as it will only upload 2/3 out of 9 images for some strange reason
when i try to upload files singularly then all 9 will upload perfectly.
i'm getting no errors in my server log also, so it must be something wrong with my script somewhere if someone can point out where I'm going wrong please.
when user selects image(s)
- $('.upload-container').on('change', 'input[name="images[]"]', function(){
var files_length = this.files.length,
count = files_length + $("li[id^='image-'] img").length;
if (count > max_images){
upload_status('Too many images selected.');
}
else {
for (var i = 0; i < files_length; i++, id++) {
read_file(this.files[i], id);
}
}
});
read file function
- function read_file(file, id){
var reader = new FileReader();
loader.display('loading Image');
reader.onload = function (event){
if (reader.readyState == 2) {
loader.stop('loading Image');
var image_type = file['type'].split("/"),
type = image_type[0],
extension = image_type[1],
size = file['size'];
image_string = event.target.result,
img = document.createElement("img"),
img.src = image_string,
cover_image = false;
img.onload = function() {
var width = img.width,
height = img.height;
if (width < 1 && height < 1){
width = img.clientWidth;
height = img.clientHeight;
}
if (type !== "image"){
upload_status('File type: ' + type + ', isn\'t supported.');
}
else if (jQuery.inArray(extension, extensions) === -1 ){
upload_status('File extension .' + extension + ', isn\'t supported.');
}
else if (size > maximum_size){
upload_status('Image is too big.');
}
else if (width < minimum_width || height < minimum_height){
upload_status('Image must be at least 500 x 500.');
}
else {
var image_string = event.target.result,
name = file['name'];
container_id = $("li[id^='image-'] img").length;
id = "image_id_" + id,
img = document.createElement("img");
img.src = image_string,
width = img.width,
height = img.height,
cover_image = 0,
filename = name.split('.');
if (filename_exists(name)){
var new_filename = null;
for (i = 1; i < 10; i++) {
new_filename = filename[0] + '- Copy(' + i + ')' + '.' + filename[1];
if (!filename_exists(new_filename)){
name = new_filename;
break;
}
}
}
images[id] = {
'string' : image_string,
'name' : name,
'size' : file['size'],
'options' : [],
'width' : width,
'height' : height
};
if (container_id === 0){
cover_image = 1;
}
$('#image-container-' + container_id).prepend('<img src="' + image_string + '" id="' + id + '" data-uploaded="false" data-edited="false" /><div class="overlay" title="' + name + '"></div><div class="options" title="Options"></div>');
send_image('upload', $('#' + id), name, file, cover_image);
}
};
img.onerror = function (event){
upload_status('Unable to load image.');
};
}
else{
upload_status('Unable to read file.');
}
};
reader.readAsDataURL(file);
}
and finally my uploader
- function send_image(method, selector, filename, file, cover){
var data = new FormData(),
xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
message = 'Uploading ' + filename;
if (method !== 'upload'){
file = JSON.stringify(file);
}
if (method === 'crop'){
message = 'Editing ' + filename;
}
else if (method === 'restore'){
message = 'Retoring ' + filename;
}
else if (method === 'remove'){
message = 'Removing ' + filename;
}
else if (method === 'change_cover_image' ||
method === 'set_cover_image'){
message = 'Changing cover image';
}
loader.display(message);
if (method === 'upload'){
data.append('cover', cover);
}
data.append('method', method);
data.append('file', file);
xhr.open('POST', 'save.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
progress.display(message, percentage);
if (percentage === 100){
loader.stop(message);
}
}
}
xhr.onerror = function () {
upload_status('Image failed to upload.');
};
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (method.match(/^(upload|crop|restore)$/)){
var src = this.responseText;
selector.attr('src', src + '?time=' + new Date());
selector.data('uploaded', true);
$('#images-uploaded').text($("li[id^='image-'] img").length);
}
} else {
upload_status('Image failed to upload.');
}
}
};
xhr.send(data);
return xhr;
}
i just don't understand how i can upload images one by one alright...but when trying to upload more, they all won't upload.
if someone could give me some advise on this it would be very helpful.
thank you
Topic Participants
ricky.powell
jakecigar