[HTML5] API to Choose and Upload for Multiple Files

멀티 파일 셀렉트 및 멀티 파일 업로드에 대한 요건이 들어와서 개발중, 

https://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

위 링크대로 개발했을때 서버단을 잘 맞춰줘야 하는데, 사내 F/W에서 사용중인 FileUpload에 그대로 적용하려하니, 잘 안됐다. 

문제 원인은, Content-Type에 boundary 가 자동으로 삽입이 되지 않았던 터. 

(boundary 참고 : [링크] HTTP multipart/form-data raw 데이터 형태 블로그 포스팅 펌. )

해답은 아래 링크에 있었다. 

http://stackoverflow.com/questions/18590630/xmlhttprequest-multipart-form-data-invalid-boundary-in-multipart

Content-Type을 임의로 multipart/form-data로 지정하지 않고 FormData 객체 생성 후, 
xmlHttpRequest.send(FormData)를 하면, 자동으로 boundary가 생성, 삽입되었다. 

서버단 수정 없이 성공적으로 파일 업로드 완료!

아래는 내가 사용한 JavaScript 예제 코드. 

function uploadFile (file) {

                var li = document.createElement("li"),
div = document.createElement("div"),
img,
xhr,
formData,
result,
fileList = document.getElementById("file-list");
li.appendChild(div);

xhr = new XMLHttpRequest();
                formData = new FormData();
formData.append("f_cmd", 102);
formData.append("file", file);

// When File uploaded
        xhr.addEventListener("load", function () {
result = JSON.parse(ComGetEtcData(xhr.responseText,'ibupSessionResult'));
if(result.code==0){
img = document.createElement("img");
img.src = 'FileDownload?key=' + ComGetEtcData(xhr.responseText,'fileKey');
li.appendChild(img);
fileList.appendChild(li);
} else {
ComShowMessage("FileUpload Failed!");
}
}, false);

// Send the file
xhr.open("post", "xxx.do", true);
                xhr.send(formData);
}