Comments on: HTML5 File Uploads with jQuery

By: Envy

Envy — Sat, 27 Apr 2013 09:29:56 +0000

I had the same problem. Files got copied into the uploads folder but the progress bar stopped at 40-50%. Examining the html by the show source command in the web browser showed that the binary data was made from the pic i uploaded. So here was no feedback from the server to the browser displaying that the upload was done. Examining with phpinfo() showed that the webserver by the provider was running php 4XX. So no json was available.
My localhost runs php 5xx and everything works fine. I used the same files/code on both machines. Json must be available to run this script.

By: Simone

Simone — Thu, 04 Apr 2013 20:40:14 +0000

Hi,
Congratulations for the tutorial, I have the following problem once the image is placed in the charging up to 50% and through the console I display the following message:

ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead. jquery.filedrop.js:311
XHR finished loading: "http://clubprive.netsons.org/upload.php". jquery.filedrop.js:311
XMLHttpRequest.sendAsBinary jquery.filedrop.js:311
send

How can I fix the problem?

By: Robin

Robin — Wed, 20 Mar 2013 11:17:43 +0000

You're actually pretty close, but you forgot enctype attribute in the form tag.
This will work:

However, this will only upload the image to the webserver. You'll need to write something yourself to actually display the image on the page.

By: Robin

Robin — Wed, 20 Mar 2013 11:07:47 +0000

If you're on Linux, try this command in the root folder of the project:

sudo chown www-data:www-data uploads

This will set the webserver as the owner of the uploads folder. The webserver username is www-data and the groupname is also www-data.

Also, if you're using Firebug, you should see the php-call in the net-tab. See what error it gives. If it's something with permissions, the above command will be the solution.

By: Mark

Mark — Sun, 10 Mar 2013 02:30:19 +0000

This happened to me too. If you have Chrome, go on your page, hit F12 to display the debugger.
Click on the "Network" tab.
Start an upload.
You should see some activity appearing.
Click on the element 'post_file.php' and then the "Preview" tab.
You should see what happened.
For me, the "uploads" directory was missing.

By: Marian Stevens

Marian Stevens — Fri, 08 Mar 2013 17:37:45 +0000

I am wanting to integrate this with MySQL as well - I need some form fields on the page to capture information about the photos being uploaded, and it seems obvious to ID them for selecting the values() in jQuery and passing that to the php handler form which can parse everything and make entries into the database as well as handle the uploads - but I'm not sure where my starting point is in passing extra form fields as I don't see a DataString jumping out at me to send the info via AJAX. I'd appreciate any suggestions. I had been using Uploadify but my hosting company shut it down with security issues. This seems to handle security/file size issues as well as file types. I had covered file types when I modified Uploadify but I also need to get away from Flash completely and Uploadify relied on Flash.

By: ALIREZA

ALIREZA — Mon, 18 Feb 2013 10:25:00 +0000

hi
thanks for this instruction.
I have a problem.When I drag the image into the box, uploaded.. But there is no link to download.How can this feature be added?
When you upload a photo, the address should be to download.
thanks

By: Nestor Leone

Nestor Leone — Sat, 12 Jan 2013 19:45:54 +0000

Any luck on this ??? I'm trying to do so too, but i'm not that good on PHP.....

By: Brian

Brian — Sat, 12 Jan 2013 08:58:10 +0000

Hi, i used your code and it working fine with the url set as "url: 'post_file.php'," but when i replaced the url location with url: '', which is the controller/function_name, enabling the file upload in CI....it doesn't work! The progress stops in the middle and the file is not getting uploaded!

By: Todd

Todd — Sat, 05 Jan 2013 20:37:50 +0000

I am hoping you can help me understand why this is not working.

I have implemented your code into my website and it is working fine the files get uploaded to the directory but I need to make one change and it is not working. I want to change the uploaded file name to a php variable $petitionid set when the page is first loaded but the variable ends up being empty when it runs the following code in your post_file.php so I end up getting a file name of _banner.jpg

I am assuming this has something to do with that the php file is being called from javascript so the variables on the original page our out of scope? Any idea how I can get the information from this variable on the original page?

// Move the uploaded file from the temporary
// directory to the uploads folder:

if(move_uploaded_file($pic['tmp_name'], $upload_dir.$petitionid."_banner.".get_extension($pic['name']))){
exit_status('File was uploaded successfuly!');
}