Destramic Posted November 1, 2015 Share Posted November 1, 2015 hey guys im running a XML HTTP request and i'm getting the error 413 - ie. image too large. I know its js i'm executing but i think its a php problem so i changed some settings in my php.ini post_max_size = 10M upload_max_filesize = 10M here is the js i'm using function upload_image(image){ var data = new FormData(); xhr = new XMLHttpRequest(); data.append('image', image); xhr.open('POST', 'save.php', true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; console.log(percentComplete + '% uploaded'); } } xhr.onload = function() { console.log(this.status); if (this.status === 200) { var response = this.response console.log('Server got:', response); } } xhr.send(data); } it works with smaller images but when trying to upload a 4.4 mb image i get the error 413...now i'm a little confused on how i'm getting this error as i've changed my post and upload max sizes is there something obvious i'm missing here please? thank you Quote Link to comment Share on other sites More sharing options...
rwhite35 Posted November 1, 2015 Share Posted November 1, 2015 Have you tried setting xhr.open( ) third argument to false? Since XMLHttpRequest default behavior is asynchronous, it may be that the larger file are taking to long to process. Setting XMLHttpRequest() to false (or synchronous) causes the save.php to completely run before the ready state changes, which in turn complete the request process. you'll also need to incorporate the readyState and Status in to your function. It would look something like: xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { console.log("done"); } } Quote Link to comment Share on other sites More sharing options...
Destramic Posted November 1, 2015 Author Share Posted November 1, 2015 ok well i did what you said and it came back with Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ 413 still 413 error...still working fine on smaller image size thanks for your post Quote Link to comment Share on other sites More sharing options...
Jacques1 Posted November 1, 2015 Share Posted November 1, 2015 Are you sure that your webserver also allows big requests? What happens if you upload the file with a plain form? Quote Link to comment Share on other sites More sharing options...
Destramic Posted November 1, 2015 Author Share Posted November 1, 2015 well i'm using my localhost at the moment...running nginx...so there should be no reason why 413 error should come up =/ Quote Link to comment Share on other sites More sharing options...
Jacques1 Posted November 1, 2015 Share Posted November 1, 2015 I don't see how the fact that you're running the server locally would automatically prevent any request size problems. Quote Link to comment Share on other sites More sharing options...
Destramic Posted November 1, 2015 Author Share Posted November 1, 2015 changing this in my nginx config sorted it client_max_body_size 500M; works great now...but is this the correct debug info i should be getting? as it spits out xhr.onload twice 99% uploaded 100% uploaded 200 Server got: 100% uploaded done 200 Server got: uploaded js: function upload_image(image, name){ var data = new FormData(); xhr = new XMLHttpRequest(); data.append('image', image); data.append('name', name); data.append('item_id', 2); xhr.open('POST', 'save.php', true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); console.log(percentage + '% uploaded'); } } xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { console.log("done"); } } xhr.onload = function() { console.log(this.status); if (this.status === 200) { var response = this.response console.log('Server got:', response); } } xhr.send(data); } thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.