jq上传file到php,jQuery文件上传
插件描述：這是一個文件上傳的展示，看很多插件，并不滿意就自己寫了一個，可能兼容性不是很好，沒有準確進行測試過，還請各位不吝賜教
更新時間：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文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信用卡取现未出账单可以还款吗 越早还产生
- 下一篇： 星模php格,extend/base/T