Jump to content

multiple uploads via XMLHttpRequest


Destramic

Recommended Posts

hey guys i've made a upload script for my site but i'm getting a server internal error 500 when selecting 3+ files at once, but works fine when uploading singular files.

 

when the user browses and selects a image to upload it's send to my send_image() function which will send the image file, where its added to the server via php in my uploaded script...each file has its own request.

 

here is the function

	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', 'http://bisi.bid/ajax/image', 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.');
			      } 
			  } 
			  
			  console.log(xhr.responseText);
			  console.log(xhr.readyState);
			  console.log(xhr.status);
			  console.log(xhr.statusText);
		  }; 

		  xhr.send(data);
		  
		  return xhr;
	 }

i believe the error i'm getting is because of the server configuration i'm getting these errors so i made changes to my server config files

 

 

nginx.config

 

keepalive_timeout  125;proxy_read_timeout 125;proxy_connect_timeout 125;fastcgi_read_timeout 125;

 

php.ini

upload_max_filesize = 40M
post_max_size       = 40M

after i made changes i tried to upload 5 images at once but the server comes back with internal error 500.

 

images I'm uploading altogether are about 8mb.

 

has someone come across this before?...any help on this matter would be appropriated...if you require further details/code please let me know.

 

 

thank you

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.