jQuery File Upload hooked to button

问题

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

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

So the working code I have is:

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

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");
    }
});

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.

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

回答1:

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

Note:

• 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.

来源：https://stackoverflow.com/questions/27194683/jquery-file-upload-hooked-to-button