免費的HTML5版uploadify送上

呂大豹發表於2013-12-01
HTML

　　相信有不少同學用過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
    }

　　已實現的特性有：

  1. 多檔案上傳
  2. 顯示進度條
  3. 顯示已上傳檔案大小和百分比
  4. 檔案字尾名和檔案大小檢測
  5. 向服務端提交額外資料
  6. 自定義檔案佇列中的html模板
  7. css樣式分離出單獨檔案，可自己定製樣式
  8. 新增檔案上傳各階段的回撥函式

使用方式

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

<div id="upload"></div>

　　然後直接呼叫即可：

$('#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官網http://www.uploadify.com/documentation/檢視，因為我完全是照著他的API實現的，用法與他一致。下面上個截圖：

完整程式碼包

　　為方便大家測試，我編寫了一個完整的demo，需要執行在PHP環境中，如果你是其他後臺語言，就自己寫一下吧，很簡單~

　　猛戳這裡下載：http://files.cnblogs.com/lvdabao/Huploadify.zip

　　如果發現bug或其他建議，可以和我聯絡哦~

相關文章