开发者

Why can this plugin upload file via ajax?

开发者 https://www.devze.com 2023-03-29 19:37 出处:网络
We know that file cannot be upload via ajax, but I don\'t understand why this ajax upload file plugin is using plain ajax?

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'),


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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号