XMLHttpRequest를 통해 파일을 멀티파트로 보냅니다.
XMLHttpRequest를 통해 파일을 멀티파트로 서블릿으로 보낼 수 있습니까?
양식을 만들어 멀티파트로 제출하고 있는데, 어찌 된 일인지 업로드 성공에 대한 답변이 오지 않습니다.나는 페이지가 새로 고쳐지는 것을 원하지 않기 때문에 Ajax에서 진행해야 합니다.
이는 XHR 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은 적절한 헤더를 관리하고 본문 인코딩을 요청하며 이 예제에서 파일은 서버 측에서 다음과 같이 사용할 수 있습니다.form-data
이름과 함께 나누다myFile
.
당신은 명심할 필요가 있습니다.FormData
이전 브라우저에서는 API가 지원되지 않습니다.caniuse.com 에서는 현재 Chrome 7+, Firefox 3.5+, Safari 5+, Internet Explorer 10+ 및 Opera 12+에서 구현되어 있음을 확인할 수 있습니다.
jQuery를 사용하는 경우에는 사용하고 싶을 수 있습니다.$.val()
다음과 같이 작동합니다.
formData.append("myFile", $("#myFileField").val());
그러나 전체 개체를 반환하지 않고 파일 이름만 다음과 같이 반환하므로 올바르지 않습니다.String
파일 내용이 포함되어 있지 않기 때문에 전혀 쓸모가 없습니다.
사용하지 않으려는 경우document.getElementById()
어떤 이유에서인지 다음 중 하나를 대신 사용합니다.
formData.append("myFile", $("#myFileField").prop("files")[0]);
formData.append("myFile", $("#myFileField")[0].files[0]);
또는 jQuery Form 플러그인을 사용할 수 있습니다.자바스크립트 코드 한 줄 없이 당신의 전체 양식이 작성되고 제대로 작동할 때, 다음 한 줄만으로 즉시 아약스화될 것입니다.
$("#formId").ajaxForm(function(response) {
// Handle Ajax response here.
});
또한 숨겨진 iframe 트릭에 의한 파일 업로드도 지원합니다.자세한 내용은 이 jQuery Form 설명서도 참조하십시오.일반(동기식) 및 Ajax(비동기식) 요청 모두에서 인터셉트할 수 있도록 서블릿 코드만 변경하면 됩니다.구체적인 예를 보려면 이 답변을 참조하십시오. JSP/서블릿 및 Ajax가 포함된 단순 계산기
어느 쪽이든 업로드된 파일은 다음에서 사용할 수 있어야 합니다.doPost()
다음과 같은 서블릿의 방법:
Part myFile = request.getPart("myFile");
또는 아직 Servlet 2.5 이상 버전인 경우 Apache Commons FileUpload를 일반적인 방법으로 사용합니다.구체적인 예는 다음 답변을 참조하십시오.JSP/서블릿을 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까?
보낼수다니없습다▁ 수 없습니다.multipart/form-data
XMLHttpRequest 하지만 XMLHttpRequest를 사용하여)XHR2
BalusC의 답변 참조).
원하는 것을 달성하기 위한 일반적인 방법은 일반적인 것입니다.form
iframe
대신. 이 은 식런으,오직만.iframe
업로드 시 새로 고쳐집니다.
언급URL : https://stackoverflow.com/questions/9395911/send-a-file-as-multipart-through-xmlhttprequest
'programing' 카테고리의 다른 글
AJAX 페이지 다운로드 진행률 (0) | 2023.08.24 |
---|---|
시퀀스 "HIbernATE_SEQUENCE"를 찾을 수 없습니다. SQL 문 (0) | 2023.08.24 |
노드 모듈에서 폰트 어썸 아이콘을 사용하는 방법 (0) | 2023.08.24 |
ExpressJS - 로더 처리되지 않은 오류 이벤트 (0) | 2023.08.24 |
폴더를 라벨로 만들기 전에 폴더가 있는지 확인하는 방법은 무엇입니까? (0) | 2023.08.24 |