Why can this plugin upload file via 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
精彩评论