Why can this plugin upload file via ajax?

Question

We know that file cannot be upload via ajax, but I don't understand why this ajax upload file plugin is using plain ajax?

_upload: function(id, params){
        var file = this._files[id],
            name = this.getName(id),
            size = this.getSize(id);

        this._loaded[id] = 0;

        var xhr = this._xhrs[id] = new XMLHttpRequest();
        var self = this;

        xhr.upload.onprogress = function(e){
            if (e.lengthComputable){
                self._loaded[id] = e.loaded;
                self._options.onProgress(id, name, e.loaded, e.total);
            }
        };

        xhr.onreadystatechange = function(){            
            if (xhr.readyState == 4){
                self._onComplete(id, xhr);                    
            }
        };

        // build query string
        params = params || {};
        params['qqfile'] = name;
        var queryString = qq.obj2url(params, this._options.action);

        xhr.open("POST", queryString, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
        xhr.setRequestHeader("Content-Type", "application/octet-stream");
        xhr.send(file);
    }

I don't like this plugin because you cannot use it with jquery and the target element must always be an ID,

function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader-demo1'),
            action: 'upload-file.php',
                onComplete: function(id, fileName, responseJSON){alert(responseJSON[0].filename)},
                debug: true
            });           
        }

        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load  
        window.onload = createUploader;

It would be what I need if I can do something like this with jquery but I just don't know how to make change the source code because it is written in plain javascript!

element: $('.upload'), or  element: $('#upload'),

If I'm not mistaken, newer browser (with the exception of IE of cause, and partly webkit too I think) can upload files with only ajax. This is due to the new file-api in javascript/html5. Oh, and by the way, you do know that jQuery **is** javascript, right? So saying you can't read it cause it's plain javascript and not jQuery just don't make any sense at all :-/ — Alxandr, Aug 21 '11 at 02:10
lol it takes a longer time to understand plain js than jquery... :-) like the plain js ajax code - I don't really understand it...:-( — Run, Aug 21 '11 at 03:14

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

Just to give you another option, there are several good file uploaders that are written using jquery. I recommend Uploadify if you are willing to try others. However, this uploader does require flash.

Edit: I dont know how this uploader works using ajax; it may be done in html5 like Sheen mentioned. However, through a little searching on stackoverflow, it seems you may be able to try this to get it to work with jquery selectors:

element: $('#upload')[0];

I found this solution from the question document-getelementbyid-vs-jquery

edited May 23 '17 at 11:52

Community

1
1

answered Aug 21 '11 at 02:05

Josh Mein

28,107
15
76
87

You didn't answer his question... D: I would like to know as well. – danem Aug 21 '11 at 02:07
@Pete I dont know what exactly he would have to do to change the tool to jquery. However, I have had success using Uploadify. I recommended it just so he would know that there are other options available. Sometimes answers to questions can also come indirectly in helping the askee with his issue directly instead of truly answering his question. – Josh Mein Aug 21 '11 at 02:10
@jmein i think the OP dont want to change it, he wants to know how its done – Rafay Aug 21 '11 at 02:15
This is only an option if you want to use flash. Valum's has a series of bugs which you'll need to work around, but I haven't found anything better. – Stefan Kendall Aug 21 '11 at 02:15
@Pete I believe I may have found a solution on stackoverflow. Please check my edit. – Josh Mein Aug 21 '11 at 02:21
@3nigma I was just giving him another option. However, I may have found a solution for him. Please check my edit. – Josh Mein Aug 21 '11 at 02:23
@jmein well what i thought was wrong the OP does want to change it :) – Rafay Aug 21 '11 at 02:28
@3nigma You may be right. He may not want to switch but he seems to be using it for the first time, so I assumed he might be willing to try others. However, my assumptions have been wrong before. – Josh Mein Aug 21 '11 at 02:34
Also he is sort of asking two questions? How does it upload using ajax and how to select item using jquery. – Josh Mein Aug 21 '11 at 02:49
@jmein, thanks. I came across that plugin before. but it was out of my mind immediately becos it relies on flash (Sorry I hate flash for some reason!) – Run Aug 21 '11 at 03:24
and yes. changing Valum's to work with jquery is one of my question. but my main question is still how Valum made it work via ajax. – Run Aug 21 '11 at 03:27
@lauthiamkok I understand. Just wanted to give you the option. Some people dont mind flash. It is a feature rich uploader and for those that dont mind flash it can be a perfect solution. – Josh Mein Aug 22 '11 at 12:13

score 0 · Answer 2 · answered Aug 21 '11 at 02:22

0

That looks html5. You can do file upload via ajax in html5. http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads

answered Aug 21 '11 at 02:22

Tae-Sung Shin

20,215
33
138
240

Why can this plugin upload file via ajax?

2 Answers2