Question

我正在使用Blueimp插件上传多个文件。这是 main.js ：

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'index.cfm/uploads/',        
        maxFileSize: 5242880,
        acceptFileTypes: /(\.|\/)(txt|csv|pdf|doc|docx|xls|xlsx|ppt|pptx)$/i
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            'includes/blueimp/cors/result.html?%s'
        )
    );

    if (window.location.hostname === 'blueimp.github.io') {
        // Demo settings:
        $('#fileupload').fileupload('option', {
            url: '//jquery-file-upload.appspot.com/',
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 5000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        });
        // Upload server status check for browsers with CORS support:
        if ($.support.cors) {
            $.ajax({
                url: '//jquery-file-upload.appspot.com/',
                type: 'HEAD'
            }).fail(function () {
                $('<div class="alert alert-danger"/>')
                    .text('Upload server currently unavailable - ' +
                            new Date())
                    .appendTo('#fileupload');
            });
        }
    } else {
        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });
    }

    $('#fileupload').bind('fileuploadadd', function (e, data) {
        var fileList = $.trim($("#hdnFileList").val());

        if (fileList.length == 0) {
            $("#hdnFileList").val($.trim(data.files[0].name));
        } else {
            fileList = fileList + "," + $.trim(data.files[0].name);
            $("#hdnFileList").val(fileList);
        }
    }).bind('fileuploadsubmit', function (e, data) {
        Remove($("#hdnFileList"), data.files[0].name);
    }).bind('fileuploadfail', function (e, data) {
        //Remove($("#hdnFileList"), data.files[0].name);
        $.each(data.files, function (index, file) {
            if (!file.hasOwnProperty('error')) {
                console.log("PASS");
            } else {
                console.log("FAIL");
            }
        });
    }).bind('fileuploaddone', function (e, data) {
        if (typeof data.result.files == "undefined") return;

        Add($("#hdnUploaded"), data.result.files[0].upFile);
        Add($("#hdnUploadedClientFile"), data.result.files[0].name);
    });

    //On upload fail remove for Upload queue
    var Remove = function (elem, filename) {
        var fileList = $.trim(elem.val());

        if (fileList.length > 0) {
            var arrFiles = fileList.split(",");

            for (var i = 0; i < arrFiles.length; i++) {
                if (arrFiles[i] == filename) {
                    arrFiles.splice(i, 1);
                }
            }
            elem.val(arrFiles.join());
        }        
    }

    //On upload done add to uploaded queue
    var Add = function (elem, filename) {
        console.log(filename);

        var fileList = $.trim(elem.val());

        if (fileList.length == 0) {
            elem.val($.trim(filename));
        } else {
            fileList = fileList + "," + $.trim(filename);
            elem.val(fileList);
        }
    }
});

第5行 - ＃11的代码是值得关注的（其余代码是为了完整性）。对象 fileupload 的初始化会向 url：＆＃39; index.cfm / uploads /＆＃39; 触发（非自愿）GET请求。 ; t想要在页面加载时触发。

当我点击一个按钮时，相同的请求被正确触发为POST，并且工作正常。

问题是页面加载时的GET请求是不合需要的，因为它是在没有任何参数的情况下触发的，服务器端代码将其作为异常处理。返回正确处理并显示在页面上的错误消息。但是不应该在PageLoad上触发请求，并且只应在单击文件上载按钮时进行。所以我想阻止在PageLoad上发出请求。

注意 - 我查看了该插件的作者演示页面，其页面上也存在问题。

Answer 1

希望这可以指出正确的方向 - 从https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin到底部：

如何通过单击按钮

开始上传

$(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.');
    }
});

}）;

或者

设置一个标志，然后在页面加载之后初始化fileupload插件（使用另一个事件/ JS Promise等），如下所示（大致实现）

var isLoaded = false;

if ( isLoaded ) {

   $('#fileupload').fileupload({
       url: 'index.cfm/uploads/',        
       maxFileSize: 5242880,
       acceptFileTypes: /(\.|\/)(txt|csv|pdf|doc|docx|xls|xlsx|ppt|pptx)$/i
    });

 }

Answer 2

我在文档准备好的 fileupload对象上提供了网址。

$(document).ready(function () {
    $('#fileupload').fileupload(
        'option',
        'url',
        'index.cfm/uploads/'
    )
});

jQuery：阻止事件在页面加载时触发

2 个答案:

如何通过单击按钮

或者