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.