|
相信有不少同學(xué)用過uploadify這一款文件上傳插件,，它支持多文件選擇、能顯示進(jìn)度條,、可配置性高,，總體來說是比較好用的。官網(wǎng)有兩個版本供下載,，分別是flash版和HTML5版,。不過令人惋惜的是,，HTML5版是收費(fèi)的?；盍诉@么多年,，啥時候用軟件掏過錢啊,！秉著發(fā)揚(yáng)我們的優(yōu)良傳統(tǒng),，我決定照著它的API自己實(shí)現(xiàn)一個HTML5版的。 經(jīng)過一番折騰,，終于覆蓋了大部分API,，已經(jīng)能夠?qū)崿F(xiàn)基本的文件上傳需求。如下,，是插件中的default配置：  var defaults = { fileTypeExts:'',//允許上傳的文件類型,，格式'*.jpg;*.doc' uploader:'',//文件提交的地址 auto:false,//是否開啟自動上傳 method:'post',//發(fā)送請求的方式，get或post multi:true,//是否允許選擇多個文件 formData:null,//發(fā)送給服務(wù)端的參數(shù),，格式：{key1:value1,key2:value2} fileObjName:'file',//在后端接受文件的參數(shù)名稱,，如PHP中的$_FILES['file'] fileSizeLimit:2048,//允許上傳的文件大小，單位KB showUploadedPercent:true,//是否實(shí)時顯示上傳的百分比,，如20% showUploadedSize:false,//是否實(shí)時顯示已上傳的文件大小,，如1M/2M buttonText:'選擇文件',//上傳按鈕上的文字 removeTimeout: 1000,//上傳完成后進(jìn)度條的消失時間，單位毫秒 itemTemplate:itemTemp,//上傳隊(duì)列顯示的模板 onUploadStart:null,//上傳開始時的動作 onUploadSuccess:null,//上傳成功的動作 onUploadComplete:null,//上傳完成的動作 onUploadError:null, //上傳失敗的動作 onInit:null,//初始化時的動作 onCancel:null//刪除掉某個文件后的回調(diào)函數(shù),，可傳入?yún)?shù)file } 已實(shí)現(xiàn)的特性有：
使用方式首先頁面上需要一個容器，通常是一個div,，如： <div id="upload"></div> 然后直接調(diào)用即可： $('#upload').Huploadify({
auto:true,
fileTypeExts:'*.jpg;*.png;*.exe',
multi:true,
formData:{key:123456,key2:'vvvv'},
fileSizeLimit:1024,
showUploadedPercent:true,
showUploadedSize:true,
removeTimeout:9999999,
uploader:'upload.php',
onUploadStart:function(){
console.log('開始上傳');
},
onInit:function(){
console.log('初始化');
},
onUploadComplete:function(){
console.log('上傳完成');
},
onCancel:function(file){
console.log(file);
}
});具體的參數(shù)含義,，如果看上面的不太清晰，可以直接去uploadify官網(wǎng)http://www./documentation/查看,，因?yàn)槲彝耆钦罩腁PI實(shí)現(xiàn)的,，用法與他一致。下面上個截圖：
完整代碼包為方便大家測試,，我編寫了一個完整的demo,，需要運(yùn)行在PHP環(huán)境中，如果你是其他后臺語言,，就自己寫一下吧,，很簡單~ 猛戳這里下載：http://files.cnblogs.com/lvdabao/Huploadify.zip 如果發(fā)現(xiàn)bug或其他建議，可以和我聯(lián)系哦~ |
|
|
