jquery.uploadify批量上傳控件,不錯哦

1.首先下載官網的包包!嘻嘻,你懂得!

官網地址:http://www.uploadify.com/download/ (目前最新版本是3.2)

2.解壓並引用裏面的相關文件

<link href="styles/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="styles/uploadify.swf"></script>
<script type="text/javascript" src="javascripts/jquery.uploadify.min.js"></script> 

還有jquery.js,你懂得!
這裏注意哦,css文件會引用到這個圖片哦,所以請你指定這個圖片的位置哦,不然就沒有顯示這個叉叉哦,這個叉叉是刪除按鈕的哦,沒有就是空白哦!

3.好戲正式上演:

<script>
function snedUpLoad(){
	var pid = $("#entityId").val();                //這個是我自己獲取的自定義參數
	var entityName = $("#entityName").val();       //同上
	$("#uploadify").uploadify({                    //初始化uploadify  uploadify是input的id
        //'debug' : false,                             //dubug模式 ,默認是false
        'auto':false,                                  //自動上傳,就是控件自動上傳,默認是true
        'multi':true,
        //'successTimeout':99999,                      //超時時間
        'formData':{'pid':pid,'entityName':entityName },//我的參數列表
        //'fileObjName':'uploadify',                   //服務器的屬性名字
        'uploader':'你的後臺url地址;jsessionid=${pageContext.session.id}',//提交服務器路徑,這裏說明下;jsessionid=${pageContext.session.id},這個是用於非IE內核的瀏覽器兼容的
        'swf':"styles/uploadify.swf",                  //flash文件,官方的文件,引用上就是了
        //'uploader': '/Home/Upload',                  //文件保存路徑   用處不大
        'buttonText': '文件上傳',			//按鈕
        //'height':'32',				//瀏覽按鈕的高度	
      	//'width':'100',                               //瀏覽按鈕的寬度
      	'fileTypeDesc':'支持的格式：',                 //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',     //允許上傳的文件後綴
        'fileSizeLimit':'3MB',                         //上傳文件的大小限制
        'queueSizeLimit' : 25,                         //上傳數量
        'onSelectError':function(file, errorCode, errorMsg){  //返回一個錯誤，選擇文件的時候觸發
           switch(errorCode) {
               case -100:
                   alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！");
                   break;
               case -110:
                   alert("文件 ["+file.name+"] 大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
                   break;
               case -120:
                   alert("文件 ["+file.name+"] 大小異常！");
                   break;
               case -130:
                   alert("文件 ["+file.name+"] 類型不正確！");
                   break;
           }
        },
        'onFallback':function(){             //檢測FLASH失敗調用
            alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件後再試。");
        },
        'onUploadSuccess':function(file, data, response){  //上傳到服務器，服務器返回相應信息到data裏
        	if(data){
        		var dataObj=eval("("+data+")");//轉換爲json對象 
				//$('#uploadify').uploadify('upload')
        	}
        }
   	});
}
</script>

$(function(){
    snedUpLoad();    //jquery容器加載完運行我們的函數
})

<input type="file" name="uploadify" id="uploadify" />  //申明控件的容器

前臺頁面代碼基本就這樣了,很好明白,至於後臺邏輯和普通上傳處理一致的,這裏就不列出來的,最後上一張圖給大家鑑賞一下

(tip:其實他的批量上傳並不是一次全部提交處理的,他是一個一個依次提交,相當是一個for循環,所以後臺處理的同時只是一個文件上傳,即排序的處理上傳文件,就和單個文件上傳的代碼一樣,如果你早有後臺的單文件上傳代碼就不用改,直接調用就行了,可以共用)

最後說一下:如果你不想用控件的自動上傳的話,就需要提空按鈕觸發上傳事件

<a href="javascript:$('#uploadify').uploadify('upload');">上傳</a>

但是如果列表有多個只會上傳第一個,我是沒明白哪裏出問題,還是說這個是bug,如果有知道的同學請留言告訴我,謝謝

這裏我提供我的解決辦法:

是在onUploadSuccess()函數繼續調用$('#uploadify').uploadify('upload'),

原理很簡單,不解釋,呵呵

更新補上一些小技巧:

$('#uploadify').uploadify('settings', 'formData', {'id':data,'entityName':entityName });   //這個是用於動態更新參數的函數,會有用到的時候的

'onAllComplete' : function(event,data) {alert(data.filesUploaded + '完成');}  //據說是個全部完成後會執行的函數,但是我沒搞過,求答案