jquery文件上傳進度條
1. 使用jquery.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網
2. 如何利用自定義文本框+圖片來實現文件上傳效果
用普通的js有點兒過時了。可以採用jQuery。文件上傳是網站很常見的功能之一，通過使用jQuery可以讓上傳過程更加人性化，更好的用戶體驗。
介紹20個jQuery的文件上傳插件，其中有一些是教程。
1. Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
2. The KillersAjax Upload
該插件使用 XHR 用於上傳多個文件，支持上傳進度顯示，但不支持 IE
3. SWFUpload jQuery Plugin
4. AjaxFileUpload
5. Uploadify
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
通過介面參數和CSS控制外觀
6. jQuery Multiple File Upload Plugin
7. jqUploader
jqUploader 是實現文件上傳的jQuery插件
8. jQuery Form Plugin
jQuery Form Plugin 是一個擴展表單操作的 jQuery 插件，直接文件上傳表單
9. jQuery Form Plugin
10. jqswfupload
11. uploadprogress
12. jQuery File Upload
13. Multiple File Upload With Progress Bar Using jQuery
14. jQuery.upload
一個簡單的 Ajax 文件上傳插件
15. Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 來處理上傳過程
16. jQuery Custom File Upload Input
17. Image Upload and Cropping with PHP and Jquery
18. PHP & jQuery image upload and crop
19. AJAX upload progress bars with jQuery, Django and nginx
20. Uploading Files with AJAX
21. AJAX Multiple File Upload Form Using jQuery
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多文件上傳組件，類似於SWFUpload。MooTools是一個與prototype相類似的一個Ajax框架。
去網路，搜索這裡面的名稱，就能找到了。 非常強大。
3. 上傳文件.文件不上傳，且進度條不動，什麼情況
jquery uploadify 上傳文件.文件不上傳
且進度條不動
文件不上傳肯定進度條不會動的啊，是關聯上的，檢查代碼或者網路看看是否通不通。