Gửi tệp dưới dạng nhiều phần thông qua xmlHttpRequest

Question

Tôi có thể gửi tệp dưới dạng nhiều phần bằng XMLHttpRequest đến một servlet không? Tôi đang tạo một biểu mẫu và gửi nó dưới dạng nhiều phần, nhưng bằng cách nào đó tôi không nhận được phản hồi để tải lên thành công. Tôi không muốn trang được làm mới, vì vậy nó phải diễn ra bởi ajax.

Answer 1

Chỉ có thể với XHR FormData API (trước đây được biết đến là một phần của "XHR2" hoặc "XHR cấp 2", hiện được gọi là "Tính năng nâng cao XHR").

Với HTML này,

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

bạn có thể tải nó như sau:

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

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

XHR sẽ chăm sóc về tiêu đề thích hợp và mã hóa cơ thể yêu cầu và các tập tin sẽ trong ví dụ này có sẵn trong phía máy chủ là form-data một phần có tên myFile.

Bạn cần lưu ý rằng FormData API không được hỗ trợ trong các trình duyệt cũ hơn. Tại caniuse.com bạn có thể thấy rằng ứng dụng hiện được triển khai trong Chrome 7+, Firefox 3.5+, Safari 5+, IE 10+ và Opera 12+.

Cách khác là sử dụng jQuery Form plugin. Toàn bộ mẫu của bạn, khi viết và hoạt động bình thường mà không cần bất kỳ dòng mã JavaScript, sau đó sẽ ngay lập tức được ajaxified chỉ với dòng sau:

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

Nó cũng hỗ trợ tải lên tập tin cũng bằng một thủ thuật iframe ẩn. Xem thêm this jQuery Form documentation để được giải thích chi tiết. Bạn chỉ có thể cần thay đổi mã servlet để có thể chặn cả hai yêu cầu bình thường (đồng bộ) và ajax (không đồng bộ). Xem thêm câu trả lời này cho một ví dụ cụ thể: Simple calculator with JSP/Servlet and Ajax

Dù bằng cách nào, các tập tin được tải lên thì nên có sẵn trong phương pháp doPost() của một servlet @MultipartConfig như sau:

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

Hoặc nếu bạn vẫn còn trên Servlet 2,5 trở lên, sử dụng Apache Commons FileUpload theo cách thông thường. Xem thêm câu trả lời này cho ví dụ cụ thể: How to upload files to server using JSP/Servlet?

Answer 2

Nó không thể gửi multipart/form-data với XHR (update:. mặc dù nó có thể trong các trình duyệt hiện đại, với XHR2 Xem câu trả lời BalusC của).

Cách phổ biến để đạt được điều bạn muốn là sử dụng số thông thường, thay vào đó, thay vào đó, thay vào đó là iframe. Bằng cách này, chỉ iframe mới được làm mới khi tải lên.