2014-04-27 1 views
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..."); 
    }); 
} 

이 잘 작동 :

답변

8

좀 더 워드 프로세서를 통해 검토 한 결과,이 같은 일을 결국.

관련 문제