相信有不少同學用過uploadify這一款文件上傳插件，它支持多文件選擇、能顯示進度條、可配置性高，總體來說是比較好用的。官網有兩個版本供下載，分別是flash版和HTML5版。不過令人惋惜的是，HTML5版是收費的?；盍诉@么多年，啥時候用軟件掏過錢啊！秉著發揚我們的優良傳統，我決定照著它的API自己實現一個HTML5版的。

經過一番折騰，終于覆蓋了大部分API，已經能夠實現基本的文件上傳需求。如下，是插件中的default配置：

復制代碼

var defaults = {

fileTypeExts:'',//允許上傳的文件類型，格式'*.jpg;*.doc'

uploader:'',//文件提交的地址

auto:false,//是否開啟自動上傳

method:'post',//發送請求的方式，get或post

multi:true,//是否允許選擇多個文件

formData:null,//發送給服務端的參數，格式：{key1:value1,key2:value2}

fileObjName:'file',//在后端接受文件的參數名稱，如PHP中的$_FILES['file']

fileSizeLimit:2048,//允許上傳的文件大小，單位KB

showUploadedPercent:true,//是否實時顯示上傳的百分比，如20%

showUploadedSize:false,//是否實時顯示已上傳的文件大小，如1M/2M

buttonText:'選擇文件',//上傳按鈕上的文字

removeTimeout: 1000,//上傳完成后進度條的消失時間，單位毫秒

itemTemplate:itemTemp,//上傳隊列顯示的模板

onUploadStart:null,//上傳開始時的動作

onUploadSuccess:null,//上傳成功的動作

onUploadComplete:null,//上傳完成的動作

onUploadError:null, //上傳失敗的動作

onInit:null,//初始化時的動作

onCancel:null//刪除掉某個文件后的回調函數，可傳入參數file

}

復制代碼

已實現的特性有：

多文件上傳

顯示進度條

顯示已上傳文件大小和百分比

文件后綴名和文件大小檢測

向服務端提交額外數據

自定義文件隊列中的html模板

css樣式分離出單獨文件，可自己定制樣式

添加文件上傳各階段的回調函數

使用方式

首先頁面上需要一個容器，通常是一個p，如：

然后直接調用即可：

復制代碼

$('#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);

}

});

總結

以上是生活随笔為你收集整理的uploadify插件html5,免费的HTML5版uploadify送上的全部內容，希望文章能夠幫你解決所遇到的問題。

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