3
이 플러그인 (jquery-file-upload)에는 많은 옵션이 있지만 문서는 모양이 좋아 보이지만 여전히 약간 혼란 스럽습니다.프로그래밍 방식으로 jquery-file-upload를 사용하여 여러 파일을 제출/전송하는 방법
파일이나 파일이 추가됩니다 때, 파일 업로드의 intialiser의add
콜백이 트리거됩니다
<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').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})
할 수 있지만 요청에서 모든 성공적인 응답 트리거 된 콜백을 갖고 싶습니다. 나는 문서의 모든 콜백 옵션과 약간 혼동 스럽다.
편집 :
내 질문에 답했습니다.
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...");
});
}
이 잘 작동 :