How can I upload file with jquery using ajax?

Question

can I upload image using jquery and ajax with this code or similar to that:

jQuery.ajax({
                type: "GET",
                url: "/userinfo/update/",
                dataType: "json",
                data: {
                        'name': jQuery("#name").val(),  
                        'uploadedImage': jQuery("#uploadedImage").val()
                },
                success: function( response ) {
                    jQuery("#errorDiv").html('');

                    },
                complete: function() {
                    jQuery("#enableFormButton").remove();

                }
            });

Now

'name': jQuery("#name").val()  is only returning the name of image file

score 0 · Answer 1 · answered Feb 22 '12 at 13:17

0

You can do this. Here's a tutorial on it. First result when you google it btw.

It doesn't work in ie 7, 8 or 9 FYI.

answered Feb 22 '12 at 13:17

tkone

22,092
5
54
78

All that does in incorporate the features of various plug-ins and features that are only part of the newest browsers. If you want to start a petty down-voting war, I've got a lot more cred to spend than you do. – Diodeus - James MacFarlane Feb 22 '12 at 13:23
You said it was impossible to do with Ajax. It is not. I'm not staring a downvote war. What you said was technically inaccurate. There is nothing about plug ins in that method, just parts of the standard js library. Which, btw has been implemented in two browsers already, and at least one beta version (ie 10) – tkone Feb 22 '12 at 13:27
Nor does it use any HTML5 techniques. That's all pure JavaScript. The op never bounded in what browser they were doing this so the question is a hypothetical. – tkone Feb 22 '12 at 13:29
And I'm not worried about who has a bigger ego here -- I'm concerned with false information being spread about the capacities of what can and can't do. You CAN do this, right now, today in exactly a form you said was impossible. – tkone Feb 22 '12 at 13:33
Considering yours doesn't actually work on IE, I think I'd be a little slower to pass judgement. – Diodeus - James MacFarlane Feb 22 '12 at 14:15
@tkone I tried your tutorial, but it seems it doesn't work in Chrome. Picture could not be exposed in browser. In firefox i could upload image. Any advice on that topic? Thanks for the effort. – Ritam Nemira Feb 22 '12 at 14:17
@MilošIlić do you have a jsfiddle or a site with the code in it? What version of Chrome are you using? – tkone Feb 22 '12 at 14:54
@tkone i Downloaded the source code from net.tutsplus.com and i tried and i got the `Notice: Undefined index: images in /var/www/ajax-net/upload.php on line 3 Call Stack: 0.0059 644728 1. {main}() /var/www/ajax-net/upload.php:0` – Ritam Nemira Feb 22 '12 at 16:23
@MilošIlić do you have a jsfiddle with the code in it? Or a site I can run it against? That error is unhelpful in and of itself. – tkone Feb 22 '12 at 16:48

score -1 · Accepted Answer · answered Feb 22 '12 at 13:14

-1

AJAX itself cannot handle file transfers. You need a plug-in (which usually uses a hidden Iframe, or HTML5 techniques) for this.

answered Feb 22 '12 at 13:14

Diodeus - James MacFarlane

112,730
33
157
176

Nope. You can upload using Ajax. No plug in needed – tkone Feb 22 '12 at 13:16
You're telling me you can transfer files, via AJAX, using XMLHTTP? – Diodeus - James MacFarlane Feb 22 '12 at 13:17
So is this answer wrong too? http://stackoverflow.com/questions/2751795/ajax-file-upload – Diodeus - James MacFarlane Feb 22 '12 at 13:18
Look at my response. FileReader – tkone Feb 22 '12 at 13:18
And this one is wrong too? http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Diodeus - James MacFarlane Feb 22 '12 at 13:18
Did you look at my response to this question? It is possible. Someone even wrote a tutorial on how to do it. – tkone Feb 22 '12 at 13:20
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/8072/discussion-between-tkone-and-diodeus) – tkone Feb 22 '12 at 13:23

How can I upload file with jquery using ajax?

2 Answers2