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

最新推荐文章于 2020-05-28 18:02:09 发布

转载最新推荐文章于 2020-05-28 18:02:09 发布 · 4k 阅读

文章标签：

#jquery #控件

本文探讨了一种文件上传控件的功能及使用方法，特别是在外部按钮触发上传时如何通过不同方式实现文件提交，包括保存数据对象、注册事件以及使用隐藏按钮等方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

比如说，他可以实现在添加一个文件后为文件添加一个上传按钮，这个是写在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');