jQuery File Upload钩到了按钮 [英] jQuery File Upload hooked to button

问题描述

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

I am attempting to use the jQuery File Upload Plugin here

我想要的行为类似于加载的主页-即-选择多个文件的能力-选择后，我不需要按钮来单独上传文件(只需单独使用取消"按钮删除)并删除所有使用顶部栏上的取消"按钮

The behavior I want is similar to the home page that loads - i.e - the ability to select multiple files - when selected I don't need the button to upload files individually (just remove with the cancel button individually) and remove all with the cancel button along the top bar

我正在用c#mvc开发网站，并且文件通过CMIS浏览器绑定上载到ECM解决方案，因此我实际上并没有使用MVC控制器方法.在使用浏览器绑定时，我需要将每个文件分别上传到CMIS端点.该代码可以很好地完成每个文件的自动数据提交

I am developing my site in c# mvc and the file gets uploaded to a ECM solution via CMIS Browser Bindings so I dont actually hit an MVC controller method. As I am using Browser Bindings I need to upload each file individually to the CMIS Endpoint. The code works fine doing an auto data submit for each file

所以我的工作代码是:

  $('#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个完成"警报，但3个文件都成功上传.但是如上所述，我想要的行为是一个全部上载"按钮，该按钮将触发我选择的每个文件的上载.我有以下代码:

If I do have 3 files selected to upload I will get 3 'Done' alerts but the 3 files all upload successfully. However as mentioned the behavior I want is one Uppload All button that would trigger the upload for each of my selected files. I have the code below:

  $('#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，但是如果我选择两个文件，然后单击"Upload AllFiles"按钮，因为如果我的第一个选定文件名为foo.txt和第二个选定文件，则我的uploadAllFiles按钮不在每个循环中是bar.txt，它将仅上传bar.txt.

So I have set the autoUpload property to false but if I select two files and then click my Upload All Files button as my uploadAllFiles button is outside my each loop if my first selected file is called foo.txt and my 2nd selected file is bar.txt it will only upload bar.txt.

有人知道我如何拥有一个名为上载所有按钮的按钮，该按钮会触发每个文件的data.submit吗?

Has anyone got any idea how I could have a button called upload all that would trigger a data.submit for each individual file?

推荐答案

并入您后面的问题中的代码:

Incorporating code from 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的.data()函数附加到<tr>元素.
• 对于删除"按钮，代码使用事件委托，这是@Ekansh对您其他问题的回答所建议的.

• Since you have singleFileUploads set to true, the data.files array will always contain exactly one file.
• The data is attached to the <tr> element using jQuery's .data() function.
• For the "Remove" buttons, the code is using event delegation, which was suggested by @Ekansh's answer to your other question.

这篇关于jQuery File Upload钩到了按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！