簡單的跨瀏覽器的jQuery/PHP文件上傳與進度條

Question

我知道有幾個主題在那裏這件事，但他們沒有提供一個文件上傳腳本一個明確的解決方案：

1. 文選IE7 +
2. 有一個進度條（在每一個瀏覽器）
3. 無閃爍（或回退）

任何解決方案？

Answer 1

您可以使用AlbanX提供的Axuploader。它有;在所有瀏覽器

• 多文件上傳
• 多文件對HTML5的瀏覽器（不是IE）對HTML5的瀏覽器
• 上傳進度信息，選擇對HTML5的瀏覽器
• 沒有閃光燈，
• 文件大小信息不Silverlight的，對其他插件，只有JavaScript
• 支持IE 6 +，Firefox的2 +，Safari瀏覽器2+，鉻1+由大塊
• 上傳文件，更PERF ormance
• 不依賴服務器通過後最大規模和最大上傳文件大小的限制

你也可以嘗試Fine-Uploader通過擴大。它有;在FF，Chrome和Safari瀏覽器（OS X）

上傳的照片取消

• 多個文件選擇，進度條在FF，Chrome和Safari瀏覽器
• 拖放和拖放文件選擇
• 如果使用FineUploader或FineUploaderBasic，則完全沒有外部依賴性。如果使用可選的jQuery包裝器，jQuery當然是必需的。
• FineUploaderBasic只需要關聯的Fine Uploader JavaScript文件。所有Fine Fine Uploader的CSS和圖像文件都可以省略。
• 不使用閃光燈
• 與HTTPS
• 在IE7 +，Firefox和Safari（OS X），鉻，iOS6的測試，和Android的各種版本全面工作。 IE10現在也支持！
• 能力，因爲他們都被選中，或「排隊」儘快上傳文件他們在用戶的請求上上傳失敗上傳從服務器後
• 顯示具體錯誤信息（將鼠標懸停在上傳失敗的項目）
• 能夠自動-retry失敗上傳
• 選項，以允許用戶手動重試上傳失敗
• 創建自己的文件驗證器和/或使用一些默認的驗證包括與精細上傳
• 在上傳過程中的不同階段，接收回調
• 發送服務器端的所有參數以及每個文件。
• 通過拖放（Chrome 21 +）上傳目錄。
• 在查詢字符串或請求正文中包含參數。
• 提交要通過API上傳的文件。
• 將文件拆分爲多個請求（文件分塊/分區）。
• 恢復失敗/停止上傳歷屆會議
• 刪除上傳的文件
• CORS支持
• 通過API上傳任何斑點的對象。
• 輕鬆設置並執行最大項目限制。
• 通過粘貼（Chrome）上傳圖片。
• 獨立文件&文件夾拖動&放置模塊。默認情況下集成到FineUploader模式中。
• 執行異步（非阻塞）的影響從移動設備的攝像頭相關的文件或直接
• 上傳圖像文件
• 檢索要上傳的文件統計數據和接收狀態回調回調任務的變化
• 而很多更多！

或者jQuery-File-Upload plugin，這已得到（兼容IE）;

• 多文件上傳： 允許一次選擇多個文件並同時上傳。
• 拖動&拖放支持： 允許通過從桌面或文件管理器中拖動文件並將它們拖放到瀏覽器窗口上來上傳文件。
• 上傳進度條： 顯示一個進度條，指示組合的單個文件和所有上傳的上傳進度。
• 可取消上傳： 單個文件上傳可以取消以停止上傳進度。
• 可恢復的上傳： 支持Blob API的瀏覽器可以恢復中止的上傳。
• Chunked uploads： 可以使用支持Blob API的瀏覽器以較小的塊上傳大文件。
• 客戶端圖像調整大小： 圖像可以通過支持所需JS API的瀏覽器在客戶端自動調整大小。
• 預覽圖像： 使用支持所需JS API的瀏覽器進行上傳之前，可以顯示圖像文件的預覽。
• 不需要瀏覽器插件（例如Adobe Flash）： 該實現基於HTML5和JavaScript等開放標準，不需要額外的瀏覽器插件。
• 傳統瀏覽器的優雅回退： 如果支持，則通過XMLHttpRequests上傳文件並將iframe作爲舊版瀏覽器的回退。
• HTML文件上傳表單回退： 如果禁用JavaScript，則顯示標準HTML文件上載表單。
• 跨站點文件上傳： 支持使用跨站點XMLHttpRequests將文件上傳到其他域。
• 多個插件實例： 允許在同一網頁上使用多個插件實例。
• 可自定義和可擴展： 提供API來設置各個選項併爲各種上傳事件定義回調方法。
• 多部分和文件內容流上傳： 文件可以作爲標準的「multipart/form-data」或文件內容流（HTTP PUT文件上傳）上傳。
• 與任何服務器端應用平臺兼容： 適用於任何服務器端平臺（PHP，Python和Ruby on Rails的，爪哇，Node.js的，圍棋等），支持標準的HTML表單文件上傳。

* UPDATE

退房10 HTML5 File Upload with jQuery Example看到一些大文件的上傳與HTML5

同樣的工作原理，在這裏10+ PHP Ajax Upload File Tutorials - Free Download你可以從很多上傳的選擇。

希望這會有所幫助。

Answer 2

使用：

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

沒有閃光燈，簡單的jQuery。

特點

1. 多個文件選擇，進度條在FF，鉻，野生動物園
2. 拖和拖放文件在FF選擇，鉻
3. 上傳是可以取消的
4. 無外部依賴關係
5. 不使用閃存
6. 全面使用https
7. FF，Chrome，Safari中的鍵盤支持
8. 在IE7,8中測試; Firefox 3,3.6,4; Safari4,5;鉻; Opera10.60;

混帳：https://github.com/valums/file-uploader

您也可以使用這些：

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

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

http://www.albanx.com/

非Flash IE進度條

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

希望這有助於。

Answer 3

http://www.plupload.com/是在多個運行時可用，並且有適度的降級。如果支持HTML5，它也可以拖放上傳。

Answer 4

爲了支持進度欄，並在IE多文件上傳需要Flash。不幸的是，新的「華麗但無閃光」的小部件都不支持這一點。

我發現的唯一的解決辦法是Uploadify，這是不完美的，但做這項工作。最大的缺點是缺乏拖放支持。

坦率地說，所有這些新的部件是好多了，但開發商似乎黯然反對實施爲IE在Flash備用解決方案。

Answer 5

我認爲下面是你需要的東西，他們也支持Flash組件在IE進展上傳以及

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