This control is a good feature, but it's a bit stressful for external call uploads.
For example, he can add a file after adding an upload button, this is written in the add, you can call Data.submit () to submit data
But if I want to implement an external button click Trigger this data.submit () there is pressure.
There are two ways of doing this:
1, to find ways to save data, when the external event triggered, call to this data and submit.
2. Try to register an event for the external button at add and trigger the event when clicked ()
3, generate a hidden button, when the external event is triggered, call this Button.Click (). However, to be aware of the problem of duplicate binding, you should clear the event first.
(typical application, a form has an upload input box, I want to call this upload input box progress event, with the default submission is a bit inconvenient, it is necessary to use this control, but after the use of the control, when the submission will be due to the control's reasons, or after the submission of the file is not available (after joining ADD,SUBMIT, etc.), It can be uploaded, but the progress is no event (without any attributes).
Now the request is, click the External upload button, call this control to upload.
After studying Upload-ui source, it was found that he called Jquery.data to save the object, which is equivalent to the first method:
Addfunction(E, data) {if(e.isdefaultprevented ()) {return false; } var$ This= $( This), that= $ This. Data (' Blueimp-fileupload ') | | $ This. Data (' FileUpload '), Options=that.options; Data.context=that._renderupload (data.files). Data (' Data ', data)//the data is bound in here .. addclass (' processing '); options.filescontainer[Options.prependfiles? ' Prepend ': ' Append '] (Data.context); That._forcereflow (Data.context); That._transition (Data.context); Data.process (function () { return$ This. FileUpload (' process ', data); }). Always (function() {Data.context.each (function(Index) {$ ( This). Find ('. Size ')). Text (That._formatfilesize (data.files[index].size)); }). removeclass (' Processing '); That._renderpreviews (data); }). Done (function() {Data.context.find ('. Start '). Prop (' disabled ',false); if((That._trigger (' added ', e, data)!==false) &&(Options.autoupload|| Data.autoupload) &&Data.autoupload!==false) {data.submit (); }}). Fail (function () { if(data.files.error) {Data.context.each (function(index) {varError =Data.files[index].error; if(Error) {$ ( This). Find ('. Error ')). Text (error); } }); } }); },
Bind event Here
function () { this. _super (); this. _on (the. Options.filescontainer, { this._starthandler, This . _cancelhandler, This . _deletehandler }); This . _initbuttonbareventhandlers (); },
Here is the event:
function (e) { e.preventdefault (); var button = $ (e.currenttarget), = Button.closest ('. Template-upload '), = Template.data (' data '); Button.prop (true); if (Data && data.submit) { data.submit (); } },
Take the data and submit it.
You can actually call the Send method, but the Send method requires a higher parameter,
$ (' #fileupload'). FileUpload (' send', {files: fileslist});
The parameter fileslist is required to be an object with an array (or Array-like list) of the File or blobobjects as files property.
You can also add a file list directly, and you can override a subset of the properties at the same time
$ (' #fileupload'). FileUpload (' Add', {files: fileslist, url'/path/to/upload/ Handler.json'});
Retrieving overall progress data
= $ (' #fileupload'). FileUpload (' Progress');
Jquery-file-upload external button Trigger upload