十年網(wǎng)站開發(fā)經(jīng)驗 + 多家企業(yè)客戶 + 靠譜的建站團隊
量身定制 + 運營維護+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
jquery.uploadify批量上傳控件
創(chuàng)新互聯(lián)服務(wù)項目包括雙湖網(wǎng)站建設(shè)、雙湖網(wǎng)站制作、雙湖網(wǎng)頁制作以及雙湖網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,雙湖網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到雙湖省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
[html]?
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??
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文件會引用到這個圖片哦,所以請你指定這個圖片的位置哦,不然就沒有顯示這個叉叉哦,這個叉叉是刪除按鈕的哦,沒有就是空白哦!
[javascript]
script?
function?snedUpLoad(){?
var?pid?=?$("#entityId").val();????????????????//這個是我自己獲取的自定義參數(shù)??
var?entityName?=?$("#entityName").val();???????//同上??
$("#uploadify").uploadify({????????????????????//初始化uploadify??uploadify是input的id??
//'debug'?:?false,?????????????????????????????//dubug模式?,默認(rèn)是false??
'auto':false,??????????????????????????????????//自動上傳,就是控件自動上傳,默認(rèn)是true??
'multi':true,?
//'successTimeout':99999,??????????????????????//超時時間??
'formData':{'pid':pid,'entityName':entityName?},//我的參數(shù)列表??
//'fileObjName':'uploadify',???????????????????//服務(wù)器的屬性名字??
'uploader':'你的后臺url地址;jsessionid=${pageContext.session.id}',//提交服務(wù)器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用于非IE內(nèi)核的瀏覽器兼容的??
'swf':"styles/uploadify.swf",??????????????????//flash文件,官方的文件,引用上就是了??
//'uploader':?'/Home/Upload',??????????????????//文件保存路徑???用處不大??
'buttonText':?'文件上傳',???????????//按鈕??
//'height':'32',????????????????//瀏覽按鈕的高度?????
//'width':'100',???????????????????????????????//瀏覽按鈕的寬度??
'fileTypeDesc':'支持的格式:',?????????????????//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本??
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',?????//允許上傳的文件后綴??
'fileSizeLimit':'3MB',?????????????????????????//上傳文件的大小限制??
'queueSizeLimit'?:?25,?????????????????????????//上傳數(shù)量??
'onSelectError':function(file,?errorCode,?errorMsg){??//返回一個錯誤,選擇文件的時候觸發(fā)??
switch(errorCode)?{?
case?-100:?
alert("上傳的文件數(shù)量已經(jīng)超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件!");?
break;?
case?-110:?
alert("文件?["+file.name+"]?大小超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大?。?);?
break;?
case?-120:?
alert("文件?["+file.name+"]?大小異常!");?
break;?
case?-130:?
alert("文件?["+file.name+"]?類型不正確!");?
break;?
}?
},?
'onFallback':function(){?????????????//檢測FLASH失敗調(diào)用??
alert("您未安裝FLASH控件,無法上傳圖片!請安裝FLASH控件后再試。");?
},?
'onUploadSuccess':function(file,?data,?response){??//上傳到服務(wù)器,服務(wù)器返回相應(yīng)信息到data里??
if(data){?
var?dataObj=eval("("+data+")");//轉(zhuǎn)換為json對象???
//$('#uploadify').uploadify('upload')??
}?
}?
});?
}?
/script?
script
function?snedUpLoad(){
var?pid?=?$("#entityId").val();????????????????//這個是我自己獲取的自定義參數(shù)
var?entityName?=?$("#entityName").val();???????//同上
$("#uploadify").uploadify({????????????????????//初始化uploadify??uploadify是input的id
//'debug'?:?false,?????????????????????????????//dubug模式?,默認(rèn)是false
'auto':false,??????????????????????????????????//自動上傳,就是控件自動上傳,默認(rèn)是true
'multi':true,
//'successTimeout':99999,??????????????????????//超時時間
'formData':{'pid':pid,'entityName':entityName?},//我的參數(shù)列表
//'fileObjName':'uploadify',???????????????????//服務(wù)器的屬性名字
'uploader':'你的后臺url地址;jsessionid=${pageContext.session.id}',//提交服務(wù)器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用于非IE內(nèi)核的瀏覽器兼容的
'swf':"styles/uploadify.swf",??????????????????//flash文件,官方的文件,引用上就是了
//'uploader':?'/Home/Upload',??????????????????//文件保存路徑???用處不大
'buttonText':?'文件上傳',???//按鈕
//'height':'32',????//瀏覽按鈕的高度?
//'width':'100',???????????????????????????????//瀏覽按鈕的寬度
'fileTypeDesc':'支持的格式:',?????????????????//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',?????//允許上傳的文件后綴
'fileSizeLimit':'3MB',?????????????????????????//上傳文件的大小限制
'queueSizeLimit'?:?25,?????????????????????????//上傳數(shù)量
'onSelectError':function(file,?errorCode,?errorMsg){??//返回一個錯誤,選擇文件的時候觸發(fā)
switch(errorCode)?{
case?-100:
alert("上傳的文件數(shù)量已經(jīng)超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件!");
break;
case?-110:
alert("文件?["+file.name+"]?大小超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大??!");
break;
case?-120:
alert("文件?["+file.name+"]?大小異常!");
break;
case?-130:
alert("文件?["+file.name+"]?類型不正確!");
break;
}
},
'onFallback':function(){?????????????//檢測FLASH失敗調(diào)用
alert("您未安裝FLASH控件,無法上傳圖片!請安裝FLASH控件后再試。");
},
'onUploadSuccess':function(file,?data,?response){??//上傳到服務(wù)器,服務(wù)器返回相應(yīng)信息到data里
if(data){
var?dataObj=eval("("+data+")");//轉(zhuǎn)換為json對象
//$('#uploadify').uploadify('upload')
}
}
});
}
/script
[javascript]
$(function(){?
snedUpLoad();????//jquery容器加載完運行我們的函數(shù)??
})?
$(function(){
snedUpLoad();????//jquery容器加載完運行我們的函數(shù)
})
[html]
input?type="file"?name="uploadify"?id="uploadify"?/??//申明控件的容器?
input?type="file"?name="uploadify"?id="uploadify"?/??//申明控件的容器
前臺頁面代碼基本就這樣了,很好明白,至于后臺邏輯和普通上傳處理一致的,這里就不列出來的,最后上一張圖給大家鑒賞一下
(tip:其實他的批量上傳并不是一次全部提交處理的,他是一個一個依次提交,相當(dāng)是一個for循環(huán),所以后臺處理的同時只是一個文件上傳,即排序的處理上傳文件,就和單個文件上傳的代碼一樣,如果你早有后臺的單文件上傳代碼就不用改,直接調(diào)用就行了,可以共用)
解決這種大文件上傳不太可能用web上傳的方式,只有自己開發(fā)插件或是當(dāng)門客戶端上傳,或者用現(xiàn)有的ftp等。
1)開發(fā)一個web插件。用于上傳文件。
2)開發(fā)一個FTP工具,不用web上傳。
3)用現(xiàn)有的FTP工具。
下面是幾款不錯的插件,你可以試試:
1)Jquery的uploadify插件。具體使用。你可以看幫助文檔。
1、首先將java項目通過解析request,并設(shè)置上傳路徑。
2、其次分配好電腦上傳路徑后,創(chuàng)建一個迭代器。
最后通過迭代器進行判空,再通過循環(huán)來實現(xiàn)多個文件的上傳,再輸出文件信息的同時上傳多個系統(tǒng)即可。