14

I want to upload a file using Ajax and php. I have a form with <input type="file"> tag. I want when user browses a file and clicks on submit, the file to be uploaded without a refresh. How should I do this ? It does't matter if refresh occur but i want to upload file with help of ajax.

tftd
  • 15,286
  • 8
  • 54
  • 99
user306205
  • 141
  • 1
  • 1
  • 4

5 Answers5

8
  • Use a hidden iframe and set your form's target to that iframe's name. This way, when the form is submitted, only the iframe will be refreshed.
  • Have an event handler registered for the iframe's load event to parse the response.

More details on my blog post: http://blog.manki.in/2011/08/ajax-fie-upload.html

Manki
  • 3,629
  • 4
  • 24
  • 18
2

I did it with this jquery plugin. It pretty much mimics standard jquery ajax functionality, but also allows you to send data using iframe. No flash involved, pure javascript.

http://malsup.com/jquery/form/

Here is a file upload example
http://malsup.com/jquery/form/#file-upload

Nikita Rybak
  • 66,340
  • 22
  • 154
  • 177
1

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere. check this: http://valums.com/ajax-upload/

zamoldar
  • 510
  • 9
  • 13
0

Here some I found http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/ and also jquery upload plugins

kaostricks
  • 1
  • 2
0

Take a look at SWFUpload, it should do what you want.

Mitch Dempsey
  • 36,881
  • 6
  • 65
  • 73