Manually doing the UI part for jQuery Upload
I'm able to upload files already with jQuery File Upload, but I'm trying to do the UI part myself for two reasons:
- the look I want is quite different from jQuery UI
- to learn the internals of this plugin a bit more
My problem is I can't seem to figure out the flow needed to complete the following actions after files are dropped:
- on initUpload, append a list item per file
- onProgress, display progress of the file upload in its respective list item
- onLoad, change the list item's text to "Complete"
I've figured out how to do 1 properly:
initUpload: function(event, files, index, xhr, handler, callBack) {
console.log("here, create list item for " + files[index].fileName);
callBack();
return false;
}
My problem is that I don't know how to refer t开发者_StackOverflowhe respective list item after I create the list item. When in either onLoad
or onProgress
, when I inspect handler
(or the other arguments that are passed to those functions), I can't seem to find a way to refer to the respective list item that I want to update.
How do I update each list item properly?
Cheers!
Sharing objects between handler callBacks:
- To refer to the list item you can make use of the handler parameter - it is an object that is shared between the different callBack methods, but unique for each individual file upload.
- The handler object contains the file upload settings and is cloned for each file upload initialization.
- An example on how to store additional objects (like the list item or upload row) can be found in the source code of jquery.fileupload-ui.js.
Regarding the UI implementation:
- Even if you make use of both jquery.fileupload.js and jquery.fileupload-ui.js the use of jQuery UI is optional.
- To implement your own progress bar visualization, you can make use of the initProgressBar option.
- The uploadTable/downloadTable and buildUploadRow/buildDonwloadRow options don't have to refer to HTML table and tr elements, but can also represent e.g. HTML ul and li elements.
精彩评论