zoukankan      html  css  js  c++  java
  • 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();

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

  • 相关阅读:
    javascript 与 asp.net 的交互
    10 Mar 10 Auto Complete Ajax Scripts
    Asp.net性能优化总结
    window.print(); is not working in Safari Browser Windows XP
    用VS.NET中的测试工具(Application Center Test)测试ASP.NET程序
    ASP.NET页面事件过程多个用户控件时的执行过程
    Swt/Jface treeViewer的使用
    批量引入struts标签简化引入操作
    android学习笔记47android_手势识别技术的实现,手势库的创建
    学校举行的ACM,有道题没弄明白!!
  • 原文地址:https://www.cnblogs.com/chucklu/p/11122732.html
Copyright © 2011-2022 走看看