jquery - jQuery 文件上传：是否可以使用提交按钮触发上传？

Question

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

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

也许我应该按照那里的建议切换到基于纯 XHR 的上传：jQuery Upload Progress 和 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 团队从 1.7 开始推荐on和off 链接）

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 行有一个“自动上传”选项。

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 基本上传器教程中：

$(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

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

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

Answer 7

在下载的示例 Navigate tojs/jquery.fileupload-ui.js中，您将拥有默认autoUpload设置的“继续”并将其设置为“ ”，然后您可以使用提交行为。truefalse

编辑：

试试这个基本实现：

 <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

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

这是按钮：

 <button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button>

这是输入元素：

    <input id="fileupload" type="file" name="files[]" style="display: none;">

这是 SaveInfo() 函数：

    //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');
        });
    }

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