jquery ajax file upload

Question

Hey guys I'm trying to implement file upload on my site without refreshing the page. I don't want something like iFrame is there any other way to do this in ajax? I've tried though (USING Codeigniter & ajax but it outputs "You have not uploaded anything"). I've read certain pages like this one but I couldn't seem to implement it properly. Any suggestions guys? I read almost all suggestions posted here using jquery ajax but they are all not good. I just want pure jquery ajax nothing else.

If its not possible, iframe could do please share some examples. :)

Note: This is only good for one upload at a time. No multiples.

Maksym Kozlenko · Answer 1 · 2012-04-16T03:59:59.727

4

Instead of reinventing a whole thing from a scratch, I would use one of the file upload components.

Plupload - has UI, integrates nicely with jQuery. Depending on browser can use HTML5, Flash, Silverlight or HTML4
Swfupload
Uploadify

edited Apr 16 '12 at 03:59

answered Apr 16 '12 at 03:54

Maksym Kozlenko

10,273
2
66
55

1

plupload has pure HTML5 and you can disable Flash module – Maksym Kozlenko Apr 16 '12 at 04:04
1

But some web browsers don't support html5. Especially IE – Peter Wateber Apr 16 '12 at 04:05
2

Plupload detects which features available in user's browser. For older browsers there is HTML4 fallback – Maksym Kozlenko Apr 16 '12 at 04:10
2

@PeterWateber Plupload is very good and completely customisable : number of files allowed, types of file, runtimes availables, etc. Just give it a try ! – Thomas Guillory Apr 16 '12 at 06:57
I've used it also in a number of projects with .NET and Python backends, so it's definitely worth its 10 Euro licensing fee :-) – Maksym Kozlenko Apr 16 '12 at 23:13
Plupload should be the best AJAX file upload. Sadly, it doesn't free for commercial use. – Apr 20 '12 at 01:18
Do you find licensing cost of four cups of coffee too expensive? :-) Consider development time saved by using well developed component. – Maksym Kozlenko Apr 20 '12 at 01:57
i find all of them, plupload, swfupload and uploadify either not working, much too complicated or not flexible enough to easily adapt... sorry... why not just plain simple hmtl input=file upload? – Helmut Nov 20 '12 at 00:29
Several reasons 1. Until recently (with HTML5) browsers did not support multiple file uploads – Maksym Kozlenko Nov 20 '12 at 01:05
2. Uploading large files by splitting into chunks is not supported by browser input field. – Maksym Kozlenko Nov 20 '12 at 01:06

score 0 · Answer 2 · answered Apr 16 '12 at 03:50

0

there is no AJAX file upload. Its all iFrame behind the curtain when it comes to file upload. The example link you gave does not do any magic but it uses hidden iFrame.

answered Apr 16 '12 at 03:50

Asdfg

11,362
24
98
175

How does facebook do it then? I've seen the code I couldn't find iframe – Peter Wateber Apr 16 '12 at 03:51
@peter not sure if Facebook changed but it used java applet at one point. – K Z Apr 16 '12 at 03:52
1

if it creates hidden iframe at runtime, how do you think you will see it? – Asdfg Apr 16 '12 at 03:53
There is HTML5 File API and XHTTP request (a.k.a AJAX) – Maksym Kozlenko Apr 16 '12 at 03:55
You are wrong. The XMLHttpRequest Level 2 adds support for the new FormData interface which allows AJAX upload of files. Here is a [reference](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData?redirectlocale=en-US&redirectslug=XMLHttpRequest%2FFormData). – buuda Sep 18 '12 at 22:18

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

Many Answers can be found here: How can I upload files asynchronously?

This question may be a duplicate to the above

Ref: "There's various ready-made plugins on doing file upload on jquery.

Doing this kind of uploading hacks is not an enjoyable experience, so people enjoy using ready-made solutions.

Here's few: http://www.phpletter.com/Demo/AjaxFileUpload-Demo

http://www.fyneworks.com/jquery/multiple-file-upload

Ajax File Upload Plugin Multiple File Upload Plugin You can search more from jquery's plugin -site."

edited May 23 '17 at 10:34

Community

1
1

answered Apr 16 '12 at 03:54

Joshua Kissoon

3,269
6
32
58

actually I've already tried the first one.. the second once I guess I couldn't understand lol – Peter Wateber Apr 16 '12 at 04:00

score 0 · Answer 4 · answered Apr 16 '12 at 04:16

0

From pure ajax it is not possible, you can use this ajax form plugin and it will be handle all things (create iframe automatically for input type file)

answered Apr 16 '12 at 04:16

Govind Malviya

13,627
17
68
94

score 0 · Answer 5 · answered Apr 16 '12 at 06:23

0

I have tried many, many plugins for a project in the past, and I came to the conclusion that I liked none of them. Well, except this one: jQuery-file-upload In my experience this is easily the best plugin out there for handling file upload.

answered Apr 16 '12 at 06:23

K Z

29,661
8
73
78

score -1 · Answer 6 · answered Apr 16 '12 at 03:53

-1

According to my knowledge there has to be a server side programming language such as php. Try this out. http://valums.com/ajax-upload/

answered Apr 16 '12 at 03:53

MiniduM

176
6

you do have to write server-side handler to save the file somewhere. – Asdfg Apr 16 '12 at 03:56
Obviously you need something on server side to handle your uploaded data :-) – Maksym Kozlenko Apr 16 '12 at 03:57
Broken link (404) – Heitor Oct 10 '17 at 17:09

jquery ajax file upload

6 Answers6