Xếp hàng các tệp tải lên HTTP không đồng bộ

Question

Có cách nào để xếp hàng các tệp tải lên mà không cần đến Flash hoặc Silverlight, chỉ với các biểu mẫu và JavaScript được sử dụng khéo léo? Lưu ý rằng quá trình tải lên sẽ được thực thi không đồng bộ.

Bằng cách "xếp hàng" video tải lên, ý tôi là nếu người dùng cố gắng tải lên nhiều tệp, chúng không được truyền đồng thời, nhưng mỗi lần một kết nối trong một kết nối HTTP.

Answer 1

Tôi không tin rằng có thể thực hiện điều này trên một kết nối HTTP, do hạn chế của thông số kỹ thuật. Tuy nhiên, bạn có thể nhận được hầu hết các hành vi tương tự bằng cách đặt các trường <input> ở dạng riêng biệt (có thể là HTML hoặc JavaScript) và gửi chúng theo thứ tự.

Đặt mục tiêu của họ trên và sử dụng sự kiện iframe.onload để kích hoạt biểu mẫu tiếp theo trong danh sách.

Ghi chú thêm:

• Xem this cho iframe nhắm mục tiêu tham khảo. Lưu ý rằng tính năng này không được hỗ trợ trong HTML/XHTML Strict.
• Thuộc tính form.target phải bằng thuộc tính iframe.name. iframe.id sẽ không hoạt động; Nó gây ra một cửa sổ pop-up trong IE6 và FF3.5.
• Ví dụ hoạt động về tải lên 'cùng một lúc' bằng cách nhắm mục tiêu có sẵn here. Tôi đã làm sạch ví dụ này một chút và sử dụng nó. Nó hoạt động trong IE6 cũng như bất kỳ trình duyệt hạng nhất nào.

Answer 2

Một tùy chọn tôi đã thấy được sử dụng trước đây, mặc dù tôi không có liên kết hoặc ví dụ, sử dụng khung nội tuyến. Về cơ bản, các tệp được gửi đến iframe và đồng hồ JavaScript để xem thời điểm iframe tải lại và sau đó gửi lại khung tiếp theo. Nó không đẹp và tôi nghĩ rằng tôi đã cố gắng, nhưng không thể làm cho nó hoạt động trên các trình duyệt (mà tôi cần vào thời điểm đó, bao gồm IE6).

Answer 3

Tôi có thẩm quyền tốt rằng Uploadify rất tốt. Hơn nữa, nó hỗ trợ hàng đợi nguyên bản. Một ví dụ đơn giản, giả sử bạn đã tạo một phần tử "tệp" biểu mẫu có id là "foo" và một phần tử để sử dụng làm hàng đợi có id là "hàng đợi". Xem docs để biết thêm thông tin.

$("foo").uploadify({ 
    'uploader' : 'uploadify.swf', 
    'script' : 'uploadify.php', 
    'cancelImg' : 'cancel.png', 
    'auto'  : true, 
    'folder' : '/uploads', 
    'queue'  : "queue" 
}); 

Answer 4

Nói chung nhìn vào nó, những gì cần phải được thực hiện:

• Một chức năng để tự động thêm các hình thức (để html) với kiểu đầu vào như tập tin. Một biểu mẫu sẽ chỉ có một trường nhập tệp. Các biểu mẫu này sẽ là hàng đợi tải lên tệp của chúng tôi.
• Chức năng gửi sẽ gửi các biểu mẫu này cái khác một cách không đồng bộ.

Logic đơn giản mà tôi có thể nghĩ bây giờ [phải viết mã khi tôi về nhà].

Answer 5

Nếu bạn đang tìm kiếm giải pháp .Net và cụ thể hơn là giải pháp Asp.Net MVC, hãy xem bài đăng này, http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html. Tôi đã đánh dấu nó để tham khảo.

Answer 6

cắm jquery này tuyên bố nó mà không sử dụng swf http://valums.com/ajax-upload/

Answer 7

Có một cách đơn giản efficent tải các tập tin asyncronysly với XMLHttpRequest: tham khảo https://developer.mozilla.org/en/using_xmlhttprequest trong "Trong Firefox 3.5 và sau đó" phần. Với điều này bạn có thể tải lên các tập tin asyncronysly cũng nhận được phần trăm tiến bộ của tải lên. Với firefox 3.6 và sau đó bạn cũng có thể tải lên nhiều tập tin asyncronyly. Tôi đang làm một hàm js để làm một cách đơn giản hơn, khi kết thúc tôi sẽ đăng nó.

Answer 8

Trong quá khứ gần đây, tôi đã viết một trình cắm thêm jQuery cho phép bạn thực hiện một việc như thế này. Tôi không thể đăng mã, nhưng tôi có thể mô tả cách nó hoạt động. Nếu nó không có ý nghĩa, hãy cho tôi biết, vì nó đã được một thời gian.

Có một bộ phần tử biểu mẫu tải lên. Khi một tệp được chọn, nó sẽ đăng lên một iFrame ẩn, nội dung (qua base64) trong đó đã được sao chép vào một trường biểu mẫu ẩn. Sau đó, khi biểu mẫu cuối cùng được gửi, nội dung của các trường biểu mẫu ẩn được sử dụng để lấy thông tin tệp.

Erick