đơn giản qua trình duyệt, jQuery/PHP tập tin tải lên với thanh tiến trình

Question

Tôi biết có một số chủ đề trên mạng về vấn đề này, nhưng không ai trong số họ cung cấp một giải pháp nhất định cho một người tải lên kịch bản tập tin đó:

1. Hoạt động trên IE7 +
2. có một thanh tiến trình (Trên mọi trình duyệt)
3. No flash (Hoặc dự phòng)

Bất kỳ giải pháp?

Answer 1

Bạn có thể sử dụng Axuploader bởi AlbanX.Nó đã có;

• đa tải lên tập tin trên tất cả các trình duyệt
• tập tin đa chọn trên các trình duyệt html5 (không IE)
• Tải lên tiến bộ thông tin trên các trình duyệt html5
• thông tin kích thước tập tin trên các trình duyệt html5
• Không có đèn flash, không có Silverlight, trên các plugin khác, chỉ JavaScript
• Hỗ trợ IE 6+, Firefox 2+, Safari 2+, Chrome 1+
• Tải lên tệp theo từng đoạn, để biết thêm thông tin ormance
• Không phụ thuộc bởi máy chủ tối đa kích thước và bài tập tin tải lên giới hạn kích thước tối đa

Bạn cũng có thể thử Fine-Uploader bởi Mở rộng. Nó đã có;

• Nhiều tập tin chọn, tiến độ thanh trong FF, Chrome, và Safari
• Kéo và thả tập tin chọn trong FF, Chrome, và Safari (OS X)
• ơn là hủy ngang
• Không có phụ thuộc bên ngoài nào cả nếu sử dụng FineUploader hoặc FineUploaderBasic. Nếu sử dụng jQuery wrapper tùy chọn, jQuery dĩ nhiên là bắt buộc.
• FineUploaderBasic chỉ yêu cầu tệp javascript Trình tải lên tốt có liên quan. Bạn có thể bỏ qua tất cả các tệp hình ảnh và css của Trình tải lên tốt.
• Không sử dụng Flash
• Hoàn toàn làm việc với HTTPS
• Tested trong IE7 +, Firefox, Safari (OS X), Chrome, iOS6, và các phiên bản khác nhau của Android. IE10 hiện cũng được hỗ trợ!
• Khả năng upload file ngay sau khi họ được lựa chọn, hoặc "hàng đợi" họ để tải theo yêu cầu của người dùng sau
• hiển thị thông báo lỗi cụ thể từ các máy chủ trên thất bại upload (di chuột qua thất bại upload mục)
• Khả năng tự động -retry không cập nhật
• Lựa chọn để cho phép người dùng tự thử tải lên không
• Tạo validator tập tin riêng của bạn và/hoặc sử dụng một số xác nhận mặc định bao gồm với Fine Uploader
• Nhận callback ở các giai đoạn khác nhau của quá trình upload
• Gửi bất kỳ tham số nào phía máy chủ cùng với mỗi tệp.
• Tải lên thư mục bằng cách kéo và thả (Chrome 21+).
• Bao gồm các thông số trong chuỗi truy vấn HOẶC nội dung yêu cầu.
• Gửi tệp để tải lên qua API.
• Chia nhỏ một tệp thành nhiều yêu cầu (phân chia/phân đoạn tệp).
• Tiếp tục thất bại/dừng cập nhật từ phiên trước
• Xóa các tập tin được tải lên
• CORS hỗ trợ
• Tải lên bất kỳ đối tượng Blob qua API.
• Dễ dàng đặt và thực thi giới hạn mục tối đa.
• Tải lên hình ảnh qua dán (Chrome).
• Tệp độc lập & thư mục kéo & mô-đun thả. Được tích hợp theo mặc định vào chế độ FineUploader.
• Thực hiện async (non-blocking) nhiệm vụ trong callbacks ảnh hưởng đến các tập tin có liên quan hoặc các tập tin
• hình ảnh Tải lên trực tiếp từ máy ảnh điện thoại di động của
• Lấy thống kê cho các tập tin được tải lên và nhận callbacks về tình trạng thay đổi
• Và nhiều hơn!

Hoặc jQuery-File-Upload plugin (tương thích với IE), đã có;

• Tải lên nhiều tệp: Cho phép chọn nhiều tệp một lúc và tải lên cùng một lúc.
• Kéo & Thả hỗ trợ: Cho phép tải tệp lên bằng cách kéo chúng từ máy tính để bàn hoặc trình quản lý tệp và thả chúng trên cửa sổ trình duyệt của bạn.
• Thanh tiến trình tải lên: Hiển thị thanh tiến trình cho biết tiến trình tải lên cho các tệp riêng lẻ và cho tất cả các tệp tải lên được kết hợp.
• Video tải lên có thể hủy: Tải lên tệp riêng lẻ có thể bị hủy để ngừng quá trình tải lên.
• Video tải lên lại: Tải lên bị loại bỏ có thể được tiếp tục với các trình duyệt hỗ trợ API Blob.
• Tải lên được tải lên: Các tệp lớn có thể được tải lên ở các đoạn nhỏ hơn với các trình duyệt hỗ trợ API Blob.
• Thay đổi kích thước hình ảnh phía máy khách: Hình ảnh có thể được tự động thay đổi kích thước ở phía máy khách với các trình duyệt hỗ trợ các API JS bắt buộc.
• Hình ảnh xem trước: Bản xem trước của tệp hình ảnh có thể được hiển thị trước khi tải lên với các trình duyệt hỗ trợ các API JS bắt buộc.
• Không có plugin trình duyệt (ví dụ: Adobe Flash) bắt buộc: Việc triển khai dựa trên các tiêu chuẩn mở như HTML5 và JavaScript và không yêu cầu bổ sung trình duyệt bổ sung.
• Dự phòng tuyệt đối cho các trình duyệt cũ: Tải lên tệp qua XMLHttpRequests nếu được hỗ trợ và sử dụng iframe làm dự phòng cho các trình duyệt cũ.
• Dự phòng biểu mẫu tải lên tệp HTML: Hiển thị biểu mẫu tải lên tệp HTML chuẩn nếu JavaScript bị tắt.
• Tải lên tệp nhiều trang: Hỗ trợ tải tệp lên miền khác với XMLHttpRequests Cross-site.
• Nhiều phiên bản plugin: Cho phép sử dụng nhiều phiên bản plugin trên cùng một trang web.
• Có thể tùy chỉnh và mở rộng: Cung cấp API để đặt các tùy chọn riêng lẻ và xác định phương thức callBack cho các sự kiện tải lên khác nhau.
• Tải lên luồng nội dung của nhiều phần và tệp: Tệp có thể được tải lên dưới dạng luồng nội dung tệp "multipart/form-data" chuẩn hoặc tệp nội dung (tải lên tệp HTTP PUT).
• Tương thích với bất kỳ nền tảng ứng dụng phía máy chủ nào: Làm việc với bất kỳ nền tảng phía máy chủ nào (PHP, Python, Ruby on Rails, Java, Node.js, Go, v.v.) hỗ trợ tải lên tệp biểu mẫu HTML chuẩn.

* CẬP NHẬT

Check-out 10 HTML5 File Upload with jQuery Example để xem một số uploaders tập tin lớn mà làm việc với HTML5

Ngoài ra, ở đây tại 10+ PHP Ajax Upload File Tutorials - Free Download bạn có thể chọn từ rất nhiều người tải lên.

Hy vọng điều này sẽ hữu ích.

Answer 2

Sử dụng này:

http://valums.com/ajax-upload/

No Flash, Simple Jquery.

Tính năng

1. nhiều tập tin chọn, tiến độ thanh trong FF, Chrome, Safari
2. drag-and-drop tập tin chọn trong FF, Chrome
3. cập là hủy
4. không có phụ thuộc bên ngoài
5. không sử dụng Flash
6. hoàn toàn làm việc với https
7. hỗ trợ bàn phím trong FF, Chrome, Safari
8. được thử nghiệm trong IE7,8; Firefox 3,3,6,4; Safari4,5; Chrome; Opera10,60;

git: https://github.com/valums/file-uploader

Bạn cũng có thể sử dụng các:

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

https://github.com/drogus/jquery-upload-progress

http://www.albanx.com/

Flash-ít IE thanh tiến trình

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

Hope this helps.

Answer 3

http://www.plupload.com/ khả dụng trong nhiều thời gian chạy và bị xuống cấp nghiêm trọng. Nếu HTML5 được hỗ trợ, nó cũng có thể kéo và thả các video tải lên.

Answer 4

Để hỗ trợ thanh tiến trình và nhiều tệp tải lên trong IE yêu cầu Flash. Thật không may, không có widget mới "hào nhoáng nhưng không chớp" hỗ trợ điều này.

Giải pháp duy nhất tôi tìm thấy là Uploadify, không hoàn hảo nhưng thực hiện công việc. Việc rút lại lớn nhất là thiếu hỗ trợ kéo và thả.

Thành thật mà nói, tất cả các tiện ích mới này tốt hơn rất nhiều, nhưng các nhà phát triển buồn bã dường như phản đối việc triển khai giải pháp dự phòng trong Flash cho IE.

Answer 5

Tôi nghĩ rằng đây là điều bạn cần, họ cũng ủng hộ tiến upload tốt trong IE bởi thành phần flash

• http://yuilibrary.com/yui/docs/uploader/
• http://www.plupload.com/documentation.php