xmlHttpRequest를 통해 멀티 파트로 파일 보내기

Question

XMLHttpRequest으로 파일을 멀티 파트로 서블릿에 보낼 수 있습니까? 양식을 만들고 멀티 파트로 제출하지만 어떻게 든 성공적으로 업로드하는 것에 대한 응답을 얻지 못하고 있습니다. 페이지를 새로 고치지 않으려면 아약스에서 수행해야합니다. (. : 그것은 XHR2으로, 최신 브라우저에서 가능하다하지만 BalusC의 답변을 참조 갱신)

Answer 1

XHR FormData API (이전에는 "XHR2"또는 "XHR 레벨 2"의 일부로 알려져 있으며 현재 XHR 고급 기능으로 알려져 있음)에서만 가능합니다. 이 HTML을 감안할 때

,

<input type="file" id="myFileField" name="myFile" /> 

당신은 다음과 같이 업로드 할 수 있습니다 :

var formData = new FormData(); 
formData.append("myFile", document.getElementById("myFileField").files[0]); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "myServletUrl"); 
xhr.send(formData); 

XHR 적절한 헤더 및 요청 본문 인코딩 및 파일이 예에서에서 사용할 수에 대한 처리됩니다

서버 측은 myFile이라는 부분으로 form-data 부분으로 표시됩니다.

FormData API는 구형 브라우저에서 지원되지 않습니다. caniuse.com에 Chrome 7 이상, Firefox 3.5 이상, Safari 5 이상, IE 10 이상 및 Opera 12 이상이 현재 구현되어 있음을 알 수 있습니다.

대안은 jQuery Form plugin을 사용하는 것입니다. 작성 및 자바 스크립트 코드의 라인없이 제대로 작동 할 때 전체 양식, 다음, 즉시 바로 다음 줄에 ajaxified됩니다

$("#formId").ajaxForm(function(response) { 
    // Handle ajax response here. 
}); 

또한 숨겨진 iframe이 트릭에 의해뿐만 아니라 파일 업로드를 지원합니다. 자세한 설명은 this jQuery Form documentation을 참조하십시오. 서블릿 코드를 변경하여 일반 (동기) 요청과 아약스 (비동기) 요청을 가로 채기 만하면됩니다. 구체적인 예를 들어이 답변을 참조하십시오 : 다음과 같이 Simple calculator with JSP/Servlet and Ajax

어느 쪽이든, 업로드 된 파일은 다음 @MultipartConfig 서블릿의 doPost() 방법에서 사용할 수 있어야합니다 :

Part myFile = request.getPart("myFile"); 

을 또는 당신은 서블릿에 아직도 경우 2.5 이상, Apache Commons FileUpload를 사용하십시오. 구체적인 예를 보려면이 대답을 참조하십시오. How to upload files to server using JSP/Servlet?

Answer 2

그것은 XHR과 multipart/form-data를 보낼 수 없습니다.

일반적인 방법으로 원하는 것을 얻으려면 일반 form을 사용하고 대신 iframe을 사용하십시오. 이렇게하면 업로드시 iframe 만 새로 고침됩니다.