插件描述：這是一個文件上傳的展示，看很多插件，并不滿意就自己寫了一個，可能兼容性不是很好，沒有準確進行測試過，還請各位不吝賜教

更新時間：2019/3/25 下午8:53:17

更新說明：修復上傳成功、上傳失敗，在關掉所有進度條的時候出現的bug

更新時間：2019/3/9 上午10:54:48

更新說明：

1、更改文件回顯和文件上傳，文件圖標狀態的bug

2、增強文件回顯功能，可下載，可刪除，具體事項可參考文檔

更新時間：2019/3/4 下午3:37:36

更新說明：感謝網友提供的PHP案例，下載地址如下：提取碼: a5zvhttps://pan.baidu.com/s/17OKh4ULRjepi84WKBix6XA

更新時間：2019/3/3 下午3:24:10

更新說明：

1、休息信息提示

2、文件上傳進度問題，10秒內獲取文件進度為0的時候，停止上傳，報錯

3、優化單文件上傳進度

4、Java后臺演示代碼：https://pan.baidu.com/s/1fIldjQ4XYluXGmCib9Ty5g

更新時間：2019/2/12 22:40:15

更新說明：

1、框架已重構，對很多功能做了優化，使用說明請參考文檔

2、舊的文檔不再使用，請勿參考

功能說明：

1、針對多文件上傳限制：單文件大小多文件總大小文件數量文件類型是否已經提交2、針對文件上傳的參數，現在可以自定義設置，針對php用戶可以根據進行參數迭代3、可進行模擬進度上傳(需手動設置成功或者失敗)4、一個頁面可創建多個多文件上傳的組件5、針對信息提醒，做了一個統一的管理

更新時間：2018/5/9 下午3:20:40

更新說明：多另一個文件上傳回顯(顯示已經上傳的文件)的功能，使用代碼如下：//顯示文件，設置刪除事件

uploadTools.showFileResult("fileUploadContent","img/a2.png","1",true,deleteFileByMySelf);

//如果不需要刪除

uploadTools.showFileResult("fileUploadContent","img/a3.png","1",false);

//多文件需要自己進行循環

function?deleteFileByMySelf(fileId){

alert("要刪除文件了："+fileId);

}

傳入的五個參數，說明如下：uploadId 文件上傳id，必須

fileUrl 文件地址，必須

fileId 文件操作的id

File 是否刪除文件

Event 刪除文件執行的事件

更新時間：2017/11/16 下午9:05:24

更新說明：新增記住文件，以及修復文件上傳時候還能繼續添加文件bug

更新時間：2017/10/20 上午9:20:33

更新說明：修改多次點擊清除多次上傳的bug

更新時間：2017/10/16 下午11:27:33

更新說明：新增一些方法和說明

自定義設置上傳按鈕，是否顯示上傳按鈕，是否顯示清除按鈕，上傳模擬進度的快慢，上傳后是否自動清除文件，單文件進度條是否顯示等

參數說明："uploadUrl":"#",//必須，上傳地址

"progressUrl":"#",//可選，獲取進去信息的url

"scheduleStandard":false,//模擬進度的模式

"selfUploadBtId":"",//自定義文件上傳按鈕id

"velocity":10,//模擬進度速度

"autoCommit":false,//是否自動上傳

"isHiddenUploadBt":false,//是否隱藏上傳按鈕

"isHiddenCleanBt":false,//是否隱藏清除按鈕

"isAutoClean":false,//是否上傳完成后自動清除

"canDrag":true,//是否可以拖動

"fileType":"*",//文件類型

"size":"-1",//文件大小限制,單位kB

"ismultiple":true,//是否選擇多文件

"showSummerProgress":true,//顯示總進度條

"showFileItemProgress":true,//是否顯示文件單個總進度

"filelSavePath":"",//文件上傳地址，后臺設置的根目錄

更新時間：2017/9/11 下午4:43:59

更新說明：模擬進度上傳的方式

可設置下面參數來選擇模擬模式

"scheduleStandard":true,//模擬進度的方式，設置為true是按總進度，用于控制上傳時間，如果設置為false,按照文件數據的總量,默認為false

更新時間：2017/8/29 下午4:04:06

更新說明：修改上傳提交其它數據bug

更新時間：2017/6/30 上午10:43:22

更新說明：在上傳的時候關閉了選擇文件的功能，關閉了自動上傳

在這里我還要說明一下：這是一個真實的進度條，我這里顯示的是一個模擬，上傳的進度信息，必須由后臺提供，如果不知道怎么寫看我給出的前后臺用Spring MVC的例子，我這里這個只是前臺！！這個只是前臺！這個只是前臺！重要的話說三遍，后臺需要自己實現，當你，寫入了uploadUrl和progressUrl的時候會實現真正的文件上傳，否則都是模擬！！！

更新時間：2017年4月29日22:12:35

更新說明：根據網友需求增加了一個自動上傳功能，配置代碼如下：$("#fileUploadContent").initUpload({

"uploadUrl":"#",//上傳文件信息地址

"progressUrl":"#",//獲取進度信息地址，可選，注意需要返回的data格式如下({bytesRead:?102516060,?contentLength:?102516060,?items:?1,?percent:?100,?startTime:?1489223136317,?useTime:?2767})

//"showSummerProgress":false,//總進度條，默認限制

//"size":350,//文件大小限制，單位kb,默認不限制

//"maxFileNumber":3,//文件個數限制，為整數

//"filelSavePath":"",//文件上傳地址，后臺設置的根目錄

//"beforeUpload":beforeUploadFun,//在上傳前執行的函數

//"onUpload":onUploadFun，//在上傳后執行的函數

autoCommit:true,//文件是否自動上傳

//"fileType":['png','jpg','docx','doc']，//文件類型限制，默認不限制，注意寫的是文件后綴

})

注意：autoCommit:true,//文件是否自動上傳

更新時間：2017年4月24日22:49:01

更新說明：

1、上次版本更新，演示效果缺失補充

2、在上傳前，可能存在這樣的場景，如要上傳除了文件路徑之外的數據，那么初始化的時候做了一些改動如下：$("#fileUploadContent").initUpload({

"uploadUrl":"#",//上傳文件信息地址

"progressUrl":"#",//獲取進度信息地址，可選，注意需要返回的data格式如下({bytesRead:?102516060,?contentLength:?102516060,?items:?1,?percent:?100,?startTime:?1489223136317,?useTime:?2767})

//"showSummerProgress":false,//總進度條，默認限制

//"size":350,//文件大小限制，單位kb,默認不限制

//"maxFileNumber":3,//文件個數限制，為整數

//"filelSavePath":"",//文件上傳地址，后臺設置的根目錄

//"beforeUpload":beforeUploadFun,//在上傳前執行的函數

//"onUpload":onUploadFun，//在上傳后執行的函數

//"fileType":['png','jpg','docx','doc']，//文件類型限制，默認不限制，注意寫的是文件后綴

})

function?beforeUploadFun(opt){

opt.otherData?=[{"name":"你要上傳的參數","value":"你要上傳的值"}];

}

function?onUploadFun(data){

alert(data);

}

注意：上面的beforeUploadFun(opt)和onUploadFun(data)都帶有這個參數，不要對其進行修改

更新時間：2017年4月18日13:13:43

更新說明：

關于火狐瀏覽器不能上傳顯示圖片做個修改。

還有，之前沒有提到，這個是可以可以拖動文件實現上傳的

使用方法

第一步：導入樣式

這兩個樣式第一個使用了阿里的fonticon，第二個是我自己寫的一個樣式

第二部：導入js

注意：只用了jquery最簡單的一些方法函數，大家可以根據自身調整jquery版本，這樣瀏覽器兼容會有些提升

第三步：建立一個文件上傳容器

第四部：初始化

$("#fileUploadContent").initUpload({

"uploadUrl":?"#",

//上傳文件信息地址

"progressUrl":?"#",

//獲取進度信息地址，可選，注意需要返回的data格式如下

(?{

bytesRead:?102516060,

contentLength:?102516060,

items:?1,

percent:?100,

startTime:?1489223136317,

useTime:?2767

})

//"showSummerProgress":false,//總進度條，默認限制

//"size":350,//文件大小限制，單位kb,默認不限制

//"maxFileNumber":3,//文件個數限制，為整數

//"filelSavePath":"",//文件上傳地址，后臺設置的根目錄

//"beforeUpload":function(){alert("zxm?first");},

//在上傳前執行的函數

//"onUpload":function(){alert("zxm?last");}，

//在上傳后執行的函數

//"fileType":['png','jpg','docx','doc']，

//文件類型限制，默認不限制，注意寫的是文件后綴

})

具體的功能我都已經進行了說明，在沒有上傳和獲取進度信息的情況下，我也寫了一個模擬的過程，但是bytesRead(已上傳數據)是不斷的累加的，以及percent也不斷累加，所以會出現不統一的現象，但是有后臺情況下不會出現這種情況，實際的百分比和已上傳的數據是關聯的，我只是做個模擬，還望各位不要較真！

關于文件上傳后臺怎么實現，我這里就不說明了。提供自身實現(Spring MVC)的一個例子：https://pan.baidu.com/s/1hrLgel2

如果連接實現可留言QQ郵箱，我會發送給各位

總結

以上是生活随笔為你收集整理的jq上传file到php,jQuery文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。