Question

我正在使用jQuery file upload进行基于AJAX的上传。它总是在选择文件后开始上传。是否可以更改行为以使用“提交”按钮？我知道Issue #35，但选项beforeSend似乎已被删除。

我使用的是Basic Plugin，而不是完整版。

也许我应该按照那里的建议切换到基于简单XHR的上传：jQuery Upload Progress and AJAX file upload。

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 link自1.7）< / p>

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

Answer 4

您可以通过挂钩添加事件来实现。在那里，您可以阻止上传者执行其默认行为。 jquery-file-upload -docs解释了这一点，但它有点难以找到。

以下内容写于blueimp basic uploader tutorial：

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

实际上非常重要的是，您创建的提交按钮不在表单内！

Answer 5

确保每次添加文件时都不通过附加事件来堆叠事件。这样，表格将被多次提交。

我会做这样的事情

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

注意off（）方法删除所有先前附加的事件。

Answer 6

使用添加模板跟随显示上传和下载必须这样做

＆＃13;

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        var that = this;
	    $.blueimp.fileupload.prototype.options.add.call(that, e, data);
        $("#up_btn").on('click', function () {
            data.submit();
        });
    },
});

＆＃13;

Answer 7

在下载的示例中导航至js/jquery.fileupload-ui.js，默认情况下，您将autoUpload设置为true，然后将其设置为“false”，然后您就可以使用提交行为。

修改的

尝试使用此基本实现：

<script> /*global $ */ $(function() { $('.file_upload').fileUploadUI({ url: 'FileUpload.ashx', method: 'POST', uploadTable: $('#files'), downloadTable: $('#files'), buildUploadRow: function (files, index) { return $('<tr><td>' + files[index].name + '<\/td>' + '<td class="file_upload_progress"><div><\/div><\/td>' + '<\/td><\/tr>'); }, buildDownloadRow: function(file) { return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>' + '<td class="file_uploaded">' + '<span class="ui-icon ui-icon-check"><\/span>' + '<\/td><\/tr>'); }, beforeSend: function(event, files, index, xhr, handler, callBack) { if (files[index].size > 500000) { handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!'); setTimeout(function() { handler.removeNode(handler.uploadRow); }, 10000); return; } callBack(); } }); }); </script>

Answer 8

以下是使用按钮实现文件上传的方法：

这是按钮：

    //use this function to save Info with Attached file
    function SaveInfo() {
        // setup our wp ajax URL
        var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo';

        $('body').addClass('waiting');
        //get the file(s)
        var filesList = $('input[type="file"]').prop('files');

        //Initialize the file uploader
        $('#Editor').fileupload();           //Editor is the Id of the form

        //Along with file, this call internally sends all of the form data!!!
        $('#Editor').fileupload('add', {
            files: filesList,
            url: action_url
        })

        $('#Editor').bind('fileuploaddone', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            if (data.result.status == 1) {  //saved!
                 //do something useful here...
            }
            $('body').removeClass('waiting');
        });

        // Callback for failed (abort or error) uploads:
        $('#Editor').bind('fileuploadfail', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            $('body').removeClass('waiting');
        });
    }

这是输入元素：

public

这是SaveInfo（）函数：

cbTESTING

注意：它可能不是很优雅，但它对我有用。这也将表单中的所有字段发送到服务器。如果文件也被上传，这将仅发送表单中的字段。如果文件不存在，则不会将表单数据发送到服务器！虽然我没有用多个文件测试它，但是这个方法也可以扩展为多个文件。当我尝试时，我会用信息更新这篇文章。

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

8 个答案: