講解jquery上傳文件進度條「jquery 文件上傳亂碼」

jQuery File Upload是一個開源（MIT協議）的文件上傳插件。支持文件上傳、多文件選擇窗口、拖拽上傳，提供進度條、驗證和預覽圖像、音頻、視頻的功能。支持跨域、分塊和可暫停的文件上傳及客戶端圖像調整。適用於任何服務器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go etc等），支持標準的HTML表單文件上傳。

1、下載及初始化

下載插件解壓放到項目任意位置，在頁面中引入文件上傳依賴jQuery、jQuery UI widget factory（如果已引入jQuery UI則不用引入）、jQuery Iframe Transport plugin（支持XHR文件上傳的插件），除此之外還有可選插件，如Bootstrap、JavaScript Load Image library等。

然後在body中創建一個文件類型的input元素，設置id、name、data-url屬性。

最後寫入如下代碼，運行腳本，一個最簡單的文件上傳就完成了。

2、產品特點

• 多文件上傳

可以同時選擇多個文件並上傳。

• 支持拖拽

允許拖拽上傳文件，從你的桌面拖拽或文件管理，把他們拖到你的瀏覽器窗口。

• 可撤銷上傳

可以取消停止上傳單個文件上傳。

• 可恢復上傳

可以恢復單個文件上傳。

• 分塊上傳

大文件支持分成多個小塊上傳。

• 客戶端圖像調整

圖片在客戶端可以自動調整大小。

• 預覽圖像、音頻和視頻

支持圖像、音頻和視頻文件預覽。

• 不需要瀏覽器插件(例如Adobe Flash)

jQuery File Upload是基於開放標準的HTML5和JavaScript實現的，不需要任何瀏覽器插件。

• HTML表單文件上傳

允許通過使用一個標準的HTML文件上傳表單部件元素。

• 跨域文件上傳

支持上傳文件到另一個域和跨站點。

• 可定製和擴展

提供了一個API來設置各個選項，為各種上傳事件定義回調方法。

• 兼容任何服務器端應用程序平台

適用於任何服務器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go etc）

桌面瀏覽器兼容：

• Google Chrome
• Apple Safari 4.0+
• Mozilla Firefox 3.0+
• Opera 11.0+
• Microsoft Internet Explorer 6.0+

移動端瀏覽器兼容：

• Apple Safari on iOS 6.0+
• Google Chrome on iOS 6.0+
• Google Chrome on Android 4.0+
• Default Browser on Android 2.3+
• Opera Mobile 12.0+