jQuery-File-Upload外部按钮触发上传

这个控件功能还不错,但是对于外部调用上传有点压力。

比如说,他可以实现在添加一个文件后为文件添加一个上传按钮,这个是写在add中的,可以调用data.submit()提交数据

但是如果我要实现外部按钮点击时触发这个data.submit()就有压力了。

有两种方式:

1、想办法保存data,在外部事件触发时,调用到这个data并submit。

2、想办法为该外部按钮在add时注册一个事件,并在点击时触发这个事件后submit()

3、生成一个隐藏button,在外部事件触发时,调用这个button.click()即可。但是要注意重复绑定的问题,要先清除一下事件。

(典型应用,一个表单中有一个上传输入框,我想调用这个上传输入框的进度事件,用默认的提交有点不方便,就需要使用这个控件,但是在使用控件后,提交时就会因为控件的原因,要么提交后取不到文件(加入add,submit等之后),要么能上传,但是进度无事件(不加任何属性))。

现在的要求是,点击外部上传按钮,调用这个控件来上传。

 

研究upload-ui源码后,发现他是调用了jQuery.data来保存对象,相当于第一种方法:

add: function (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)    //这里把数据绑定进去
                    .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) {
                            var error = data.files[index].error;
                            if (error) {
                                $(this).find('.error').text(error);
                            }
                        });
                    }
                });
            },

这里绑定事件

 _initEventHandlers: function () {
            this._super();
            this._on(this.options.filesContainer, {
                'click .start': this._startHandler,
                'click .cancel': this._cancelHandler,
                'click .delete': this._deleteHandler
            });
            this._initButtonBarEventHandlers();
        },

这里是事件:

_startHandler: function (e) {
            e.preventDefault();
            var button = $(e.currentTarget),
                template = button.closest('.template-upload'),
                data = template.data('data');
            button.prop('disabled', true);
            if (data && data.submit) {
                data.submit();
            }
        },

取到其中的data并提交。

 

其实也可以调用send方法来发送,但是send方法的参数要求较高,

$('#fileupload').fileupload('send', {files: filesList});

要求参数filesList为 an object with an array (or array-like list) of File or Blobobjects as files property.

 

同样添加时也可以直接添加文件列表,并可同时覆盖一部分属性

$('#fileupload').fileupload('add', {files: filesList, url: '/path/to/upload/handler.json'});

 

Retrieving overall progress data
var overallProgress = $('#fileupload').fileupload('progress');
posted @ 2015-05-28 00:01  光闪  阅读(14306)  评论(2编辑  收藏  举报