Question

我正在尝试使用jQuery文件上传插件here

我想要的行为类似于加载的主页 - 即 - 选择多个文件的能力 - 选择后我不需要按钮单独上传文件（只需单独取消取消按钮）和使用顶栏上的取消按钮删除所有内容

我正在c＃mvc中开发我的网站，并且该文件通过CMIS Browser Bindings上传到ECM解决方案，所以我实际上没有点击MVC控制器方法。当我使用浏览器绑定时，我需要将每个文件单独上传到CMIS端点。代码可以很好地为每个文件提交自动数据提交

所以我的工作代码是：

  $('#uploadFile').fileupload({
        replaceFileInput: false,
        singleFileUploads: true,
        add: function (e, data) {
            $.each(data.files, function (index, file) {
                data.url = 'mycmis_url';
                data.type = 'POST';
                data.submit();
            });
        },
        done: function (e, data) {
            alert("Done");
        }
    });

如果我确实选择了3个文件上传，我将获得3＆＃39;完成＆＃39;警报，但3个文件都成功上传。然而，如上所述，我想要的行为是一个Uppload All按钮，它将触发每个所选文件的上传。我有以下代码：

  $('#uploadFile').fileupload({
    replaceFileInput: false,
    singleFileUploads: true,
    autoUpload: false,
    add: function (e, data) {
        $.each(data.files, function (index, file) {
            data.url = 'mycmis_url';
            data.type = 'POST';
        });
        $("#uploadAllFilesBtn").unbind('click').on('click', function () { data.submit(); });
    },
    done: function (e, data) {
        alert("Done");
    }
});

所以我已经将autoUpload属性设置为false但是如果我选择了两个文件，然后单击我的上传所有文件按钮，因为我的每个循环都在我的每个循环之外，如果我的第一个选定文件被称为foo.txt和我的第二个选定文件是bar.txt它只会上传bar.txt。

有没有人知道我怎么能有一个名为upload的按钮，它会触发每个文件的data.submit？

Answer 1

合并your later question的代码：

$('#uploadFile').fileupload({
    replaceFileInput: false,
    singleFileUploads: true,
    add: function(event, data) {
        data.url = 'myUrl';
        data.type = 'POST';
        data.context = $('<tr>'
                + '<td><strong>Selected File : </strong>' + data.files[0].name + '</td>'
                + '<td>&nbsp;</td>'
                + '<td><button type="button" class="removeBtn btn btn-default">'
                + '<span class="glyphicon glyphicon-remove-circle"></span>'
                + 'Remove File</button></td>'
                + '</tr>')
            .appendTo('#files')
            .data('data', data);
    }
});

$('#files').on('click', '.removeBtn', function() {
    $(this).closest('tr').remove();
});

$('#uploadAllFiles').click(function() {
    var jqXHRs = [];
    $('#files').find('tr').each(function() {
        jqXHRs.push($(this).data('data').submit());
    });
    $.when.apply($, jqXHRs).done(function() {
        alert('done');
    });
});

注意：

由于singleFileUploads设置为true，data.files数组将始终只包含一个文件。
data使用jQuery的<tr>函数附加到.data()元素。
对于＆＃34;删除＆＃34;按钮，代码使用事件委托，这是@ Ekansh对你的另一个问题的回答。

jQuery文件上传挂钩到按钮

1 个答案: