Question

这个插件有很多选项（jquery-file-upload），文档看起来不错，但我仍然有点困惑。我的表格看起来像：

<form id="fileupload" action="/file-upload" method="POST" enctype="multipart/form-data">
    <div class="form-buttons">
    <span id="add-files-wrap">
        <span>Add Files</span>
        <input id="add-files-btn" type="file" name="files[]" multiple>
    </span>
    <button id="upload-btn" type="button" onclick="uploadFiles()" class="btn-disabled">
        <span>Start Upload</span>
    </button>
    </div>
</form>

添加一个或多个文件后，会触发fileupload intialiser中的add回调：

$('#fileupload').fileupload({
url: '/file-upload',
sequentialUploads: true,
add: function(e, data) {
    $.each(data.files, function(idx, file) {
            MY_FILES.push(file);
        }
    }
});

然后点击表单中的上传按钮：

function uploadFiles() {
for (var i=0; i<MY_FILES.length; i++) {
        // Submit the file - how ???
    }
}

我想一次一个地提交/发送每个文件，对每个文件使用单独的请求。我知道我可以做fileupload('send', {files: MY_FILES})但是我希望有一个回调来触发请求的每个成功响应。我对文档中的所有回调选项感到困惑。

修改
回答了我自己的问题。

Answer 1

在仔细阅读文档之后，我最终做了类似的事情：

function uploadFiles() {
    uploadFile( FILES.pop() );
}

function uploadFile(file) {
    if (file == null) {
        console.log("Finished processing files.");
        return;
    }
    $('#fileupload').fileupload('send', {files: [file]})
    .success(function (result, textStatus, jqXHR) {
        console.log("Success...");
        uploadFile( FILES.pop() );
    })
    .error(function (jqXHR, textStatus, errorThrown) {
        console.log("Error...");
    })
    .complete(function (result, textStatus, jqXHR) {
        console.log("Complete...");
    });
}

这很好用。

如何使用jquery-file-upload以编程方式提交/发送多个文件

1 个答案: