2011-09-29 28 views
5

Sau khi nghiên cứu một toàn thể ngày của & & cố gắng, tôi cuối cùng đã từ bỏ các file upload bởi tinh khiết AJAX (ps: bài này How can I upload files asynchronously with JQuery? chôn hy vọng cuối cùng của tôi)Tại sao tôi không thể tải lên tệp một cách không đồng bộ?

Câu hỏi của tôi có thể là một vô nghĩa chút, nhưng tôi vẫn muốn biết tại sao ajax (hoặc XMLHttpRequest) không thể xử lý điều này? tại sao các tệp không được chuyển như httprequest thực?

+2

Do JavaScript không thể đọc tệp cục bộ - ít nhất là không có sự trợ giúp của một số phép thuật HTML 5 API. –

+0

@PeKKa Điều đó có nghĩa là yêu cầu AJAX (với js) và yêu cầu Biểu mẫu (có html) là những điều hoàn toàn khác nhau? Ngay cả với các trình duyệt? – rhapsodyn

+2

không thực sự - bạn có thể xây dựng bất kỳ loại yêu cầu nào bằng cách sử dụng Ajax. Nó chỉ truy cập vào tập tin cục bộ mà không thể có trong JavaScript vì lý do bảo mật. –

Trả lời

6

Javascript không thể đọc tệp cục bộ vì lý do bảo mật, vì vậy chúng tôi không thể gửi dữ liệu bằng AJAX.

Tuy nhiên, bạn có thể BÀI một biểu mẫu HTML chuẩn và đặt mục tiêu biểu mẫu thành một khung nội tuyến vô hình trên trang. Iframe này sau đó có thể sử dụng mã phía máy chủ để xử lý việc tải lên.

Nếu lý do bạn sử dụng AJAX là vì bạn muốn thanh tiến trình khi tệp đang tải lên, sử dụng phương pháp này bạn có thể sử dụng biến tĩnh phía máy chủ để lưu tiến trình tải lên tệp, sau đó sử dụng AJAX thực hiện yêu cầu đơn giản, theo thời gian đến một trang HTTP khác, chỉ trả về tiến trình tải lên.

2

Cũng giống như câu trả lời được cập nhật trong trường hợp ai đó Googles này, XMLHttpRequest cấp 2 không hỗ trợ AJAX đệ trình các đầu vào tệp.

Trình duyệt hỗ trợ:

http://caniuse.com/xhr2

Nó sử dụng các đối tượng FormData Javascript.

How to send FormData objects with Ajax-requests in jQuery?

Đừng quên tắt processData và contentType nếu bạn đang làm điều này.

var fd = new FormData();  
fd.append('file', input.files[0]); 

$.ajax({ 
    url: 'http://example.com/script.php', 
    data: fd, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function(data){ 
    alert(data); 
    } 
}); 
Các vấn đề liên quan