jQuery file upload callback options

autoUpload

By default, files added to the widget are uploaded as soon as the user clicks on the start buttons. To enable automatic uploads, set this option to true.

• Type: boolean
• Default: true

Please note that in the basic File Upload plugin, this option is set to true by default.

 

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#callback-options

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processing-callback-options

Callback Options

All callbacks are of type function and can also be bound as event listeners, using the callback name plus "fileupload" as prefix:

$('#fileupload')
    .bind('fileuploadadd', function (e, data) {/* ... */})
    .bind('fileuploadsubmit', function (e, data) {/* ... */})
    .bind('fileuploadsend', function (e, data) {/* ... */})
    .bind('fileuploaddone', function (e, data) {/* ... */})
    .bind('fileuploadfail', function (e, data) {/* ... */})
    .bind('fileuploadalways', function (e, data) {/* ... */})
    .bind('fileuploadprogress', function (e, data) {/* ... */})
    .bind('fileuploadprogressall', function (e, data) {/* ... */})
    .bind('fileuploadstart', function (e) {/* ... */})
    .bind('fileuploadstop', function (e) {/* ... */})
    .bind('fileuploadchange', function (e, data) {/* ... */})
    .bind('fileuploadpaste', function (e, data) {/* ... */})
    .bind('fileuploaddrop', function (e, data) {/* ... */})
    .bind('fileuploaddragover', function (e) {/* ... */})
    .bind('fileuploadchunkbeforesend', function (e, data) {/* ... */})
    .bind('fileuploadchunksend', function (e, data) {/* ... */})
    .bind('fileuploadchunkdone', function (e, data) {/* ... */})
    .bind('fileuploadchunkfail', function (e, data) {/* ... */})
    .bind('fileuploadchunkalways', function (e, data) {/* ... */});

Note: Adding additional event listeners via bind (or on method with jQuery 1.7+) method is the preferred option to preserve callback settings by the jQuery File Upload UI version.

 

add

The add callback can be understood as the callback for the file upload request queue. It is invoked as soon as files are added to the fileupload widget - via file input selection, drag & drop or add API call.

The data parameter allows to override plugin options as well as define ajax settings.
data.files holds a list of files for the upload request: If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually. Else the add callback will be called once for each file selection.

The upload starts when the submit method is invoked on the data parameter.
data.submit() returns a Promise object and allows to attach additional handlers using jQuery's Deferred callbacks.

 

The default add callback submits the files if the autoUpload option is set to true (the default for the basic plugin).

It also handles processing of files before upload, if any process handlers have been registered.

 

Default:

需要注意的是，这里获取autoUpload是通过$(this).fileupload('option', 'autoUpload')

以下这段代码在jquery.fileupload.js中，这个add方法是options的成员

 add: function (e, data) {
                if (e.isDefaultPrevented()) {
                    return false;
                }
                var flag=(data.autoUpload !== false &&
                    $(this).fileupload('option', 'autoUpload'));
                console.log(flag);
                if (data.autoUpload || flag) {
                    data.process().done(function () {
                        data.submit();
                    });
                }

Example:

function (e, data) {
    $.each(data.files, function (index, file) {
        console.log('Added file: ' + file.name);
    });
    data.url = '/path/to/upload/handler.json';
    var jqXHR = data.submit()
        .success(function (result, textStatus, jqXHR) {/* ... */})
        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
        .complete(function (result, textStatus, jqXHR) {/* ... */});
}

 

 

 

done

Callback for successful upload requests.

This callback is the equivalent to the success callback provided by jQuery ajax()

and will also be called if the server returns a JSON response with an error property.

 

always

Callback for completed (success, abort or error) upload requests.

This callback is the equivalent to the complete callback provided by jQuery ajax().

 

 

Troubleshooting

下面这种写法有问题，会导致jquery.fileupload-process.js中的options[add]无法触发，原因是被覆盖了。

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L54

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

 

autoUpload设置为false，不工作

发现问题是，在自定义的add的handler中，调用了data.submit();

直接注释那段代码就可以了

 

作者:Chuck Lu    GitHub