jQuery文件上传:是否可以通过提交按钮触发上传？

Question

我正在使用jQuery文件上传基于AJAX的上传.它总是在选择文件后开始上传.是否可以更改行为以使用"提交"按钮？我知道问题#35,但选项beforeSend似乎已被删除.

我使用的是Basic Plugin,而不是完整版.

也许我应该按照建议切换到基于XHR的简单上传:jQuery Upload Progress和AJAX文件上传.

Answer 1

如果你有按钮

<button id="up_btn">Upload</button>

你可以试试

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

编辑:根据评论更好的答案考虑off避免重复的请求.(也工作unbind,我不检查是否是bind,unbind但jquery团队推荐on和off 链接自1.7)

Answer 2

这些答案都不适用于多个文件上传.我的案例涉及在评论帖子中允许多个附件.所以我需要先保存评论以获取ID,然后上传并保存所有附件.这看起来像是一件微不足道的事情,但使用这个插件并不是那么直观.我的解决方案在jQuery中使用自定义事件,效果很好.

当前接受的答案绑定到"添加"回调中按钮的单击事件,但是对每个文件调用一次"添加"回调.如果您每次仅取消绑定所有事件,则仅上载最后一个文件.

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        $("#up_btn").on('customName', function (e) {
            data.submit();
        });
    },
});

通过将提交按钮绑定到自定义名称,我们可以在提交图像之前进行任何我们想要的预处理.在我的情况下,它涉及提交评论并取回我在单独电话中所做的评论ID.此代码只响应单击,但您可以在触发事件之前执行任何操作.

$("#up_btn").on('click', function (e) {
    e.preventDefault();
    $("#up_btn").trigger( "customName");
});

您可以在触发事件时传递所需的任何数据,因此它可以让您完全控制您的表单.

Answer 3

您也可以在jquery.fileupload.js中找到

第142行有一个'autoUpload'选项.

uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true    // <<---------- here