cách gửi dữ liệu tệp bằng Dajaxice?

Question

Tôi đang sử dụng ajax cho trang web của mình. Tôi đã sử dụng thành công jQuery.ajax() để tải tệp không đồng bộ lên máy chủ. Tôi đang sử dụng Dajax và Dajaxice do đó tôi cũng định sử dụng các ứng dụng này để tải tệp lên. Tôi đã thử ví dụ this. Nó hoạt động tốt. Nhưng nếu tôi thêm trường tệp vào biểu mẫu html của tôi, nó sẽ không gửi tệp tới máy chủ. Biểu mẫu html của tôi trông giống như

<form id="myform" action="/file/" method="post" enctype="multipart/form-data"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div> 
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p> 
<p><input type="file" name="docfile" id="id_docfile" /></p> 
<p><input type="submit" value="Upload" /></p> 
</form> 

Câu hỏi này đã được hỏi ở nhiều nơi nhưng chưa bao giờ trả lời.

Answer 1

Afaik hiện không có quy định nào trong dajax/dajaxice để tải tệp lên.

Tôi đã sử dụng dajax trong một vài dự án và đã làm tròn điều này bằng cách sử dụng blueimp/jquery-file-upload và chế độ xem django chấp nhận POST của tệp tải lên và trả lại chuỗi JSON cho khách hàng.

Đây là giải pháp ít hoàn hảo nhất vì nút jquery-file-upload được tạo kiểu khác với các phần tử html bình thường, có thể tạo kiểu cho toàn bộ biểu mẫu bằng jQuery-ui, mặc dù đây là phần bổ sung công việc.

Cả hai, dwr là khá nhiều dajax cho Java và tasty pie cho django cung cấp tải tệp lên, vì vậy trong lý thuyết, bạn có thể triển khai.

Tôi rất vui khi đăng một mẫu giải pháp ajax của tôi nếu có ai đó thấy chúng hữu ích.

Answer 2

Tôi cũng đã gặp sự cố này gần đây. Vì vậy, tôi đã đào một chút và phát hiện một số câu trả lời.

Nó hoạt động tốt. Nhưng nếu tôi thêm trường tệp vào biểu mẫu html của tôi, nó sẽ không gửi tệp tới máy chủ.

Phương thức serialize() được sử dụng trong ví dụ về tài liệu. Nhưng theo số jQuery doc:

Dữ liệu từ phần tử chọn tệp không được đăng theo thứ tự.

Ngoài ra, không có cách nào rõ ràng để tải tệp lên ajax, vì JS không có quyền truy cập vào bên ngoài trình duyệt của khách hàng. Vì vậy, tôi không nghĩ rằng nó có thể thực hiện bằng cách sử dụng dajaxice.

Các hack dễ dàng nhất, tôi đã tìm thấy là để gửi mẫu cho các iframe vô hình sử dụng target tùy chọn:

<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>

như vậy, chỉ có iframe sẽ được làm mới. Sử dụng js bạn hơn có thể lấy dữ liệu từ nó bắt sự kiện load().

Quy trình chi tiết hơn được mô tả here