Jquery-file-upload external button Trigger upload

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.