免費的HTML5版uploadify送上

　　相信有不少同學用過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或其他建議，可以和我聯系哦~