2011-12-12 32 views
5

Tôi hiện đang làm việc trên một ứng dụng web cho phép người dùng tải tệp lên mà không cần tải lại trang. Cho đến nay, người dùng có thể duyệt các tập tin, và khi đầu vào thay đổi, các tập tin được tải lên bằng cách sử dụng kỹ thuật iframe sau:Thanh tiến trình cho Tải lên tệp iframe?

HTML:

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe> 
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
    <input type="file" name="files[]" multiple id="old-file-picker" > 
</form> 

Javascript/jQuery:

$('#old-file-picker').change(function() { 
    // Submit the form 
    $('#old-style-upload').submit(); 
}); 
$('iframe[name=iframe-target]').load(function() { 
    // Code that deals with the newly uploaded files 
    $('#old-style-upload').get(0).reset(); 
}); 

Công trình này tuyệt vời, tuy nhiên, người dùng không có cách nào biết rằng các tệp đang tải lên và cũng không mất bao lâu. Có cách nào để tạo thanh tiến trình hiển thị tiến trình tải tệp lên không?

Điều duy nhất tôi có thể nghĩ đến là hiển thị số loading gif.

Trả lời

2

Để thực hiện việc này, nếu bạn sử dụng bài đăng biểu mẫu nhiều phần/biểu mẫu dữ liệu thông thường, bạn sẽ cần phải có mã ở phía máy chủ; một trong đó có thể phục hồi tiến trình cho JavaScript chạy trong trình duyệt của khách hàng. Hãy xem at this previously asked question. Hoặc bạn có thể sử dụng Flash (nhưng có thể bạn không muốn) hoặc HTML 5. Bạn có thể xem câu hỏi đó và this question concerning XMLHTTPRequests.

Các vấn đề liên quan