此文是jQuery + SWFUpload + COS的上傳插件源代碼，使用了jquery1.4、SWFUpload2.2和COS來制作jquery上傳插件。詳細請看代碼說明：
一、引入必須的js文件和css文件
/*jquery1.4核心庫*/
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
/*自定義jquery插件vinSwfUpload的皮膚css樣式*/
<link href="css/vinSwfUpload-1.2-skin.css" rel="stylesheet" type="text/css"/>
/*自定義jquery插件vinSwfUpload的主要css樣式*/
<link href="css/vinSwfUpload-1.2.css" rel="stylesheet" type="text/css"/>
/*自定義jquery插件vinSwfUpload的jquery插件js*/
<script type="text/javascript" src="vinSWFUpload-1.2.js"></script>
/*官方SwfUpload的核心js/
<script type="text/javascript" src="core/SWFUpload-2.2.js"></script>
二、在body中添加組件顯示目標
<div id="vinEdit"></div>
三、在jqeury中初始化插件
<script type="text/javascript">
$(function() {
// 文檔就緒
var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/";
var upload = $("#vinEdit").vinSWFUpload( {
uploadURL:'<%=path%>/swf/upload',
width : 500,
heigth : 300,
sizeUnit:"M",
skin:"green",
autoRemoveStoped:false,
flashURL : path+"core/SWFUpload.swf",
addImgURl:path+"images/add.gif",
uploadImgURl:path+"/images/upload.png",
stopImgURl:path+"images/stop.png",
deleteImgURl:path+"images/trash.gif",
tipImgURl:path+"images/tip.gif"
});
});
</script>
3.參數說明：
注：有關SWFUpload的詳細說明請參考SWFUpload V2.2.0 說明文檔：
http://leeon.me/upload/other/swfupload.html
width : 500, 插件顯示區域寬度
heigth : 100, 插件顯示區域高度
uploadURL:'/swf/upload', 處理上傳請求的服務器端腳本URL
flashURL:"core/SWFUpload.swf", SWFUpload.swf的文件地址
flash9URL:"core/SWFUpload_f9.swf", SWFUpload_f9.swf f的文件地址
hideUploadBt:true, 隱藏上傳按鈕
hideStopBt:true, 隱藏停止按鈕
hideDeleteSelectBt:true, 隱藏刪除按鈕
hideDeleteAllBt:true, 隱藏刪除所有按鈕
addImgURl:"images/add.gif", 新增按鈕的圖標地址
uploadImgURl:"images/upload.png", 上傳按鈕的圖標地址
stopImgURl:"images/stop.png", 停止按鈕的圖標地址
deleteImgURl:"images/trash.gif", 刪除按鈕的圖標地址
tipImgURl:"images/tip.gif", 加載提示圖片的地址
fileLimit:0, 限定用戶一次性最多上傳多少個文件
maxSize:'-1',//1M 上傳文件體積上限，單位byte,默認10M
sizeUnit:"Byte", 選擇的文件最終顯示的計量結果單位
sizeFixed:2, 在計算結果后保留的小數位數
fileType:"*.*", 允許上傳的文件類型
autoRemove:false, 是否自動移除完成上傳的記錄
autoRemoveStoped:false, 是否在停止的時候移除上傳中的文件記錄
skin:"gray", 皮膚樣式：
"gray","black",
"blue","green",
"orange","purple",
"red"
progressStyle:"progressBar",//progressBar,percent 進度顯示效果
Percent：百分比
progressBar：進度條
4、效果圖預覽 （1）
效果圖預覽 （2）
有了上傳插件，那肯定是要有處理上傳的類的，舉例使用servlet+COS：
下面是主要代碼：（詳細代碼見class文件）
DefaultFileRenamePolicy rename = generateFileRenamePolicy();
MultipartRequest multi = null;
try {
multi = new MultipartRequest(request, parameters.getSaveDirectory(), parameters.getMaxPostSize(),parameters.getEncoding(), rename);
renderJson(response,Constant.UPLOAD_SUCCESS);
} catch (IOException e) {
if(!BlankUtil.isBlank(e.getMessage())){
int index = e.getMessage().indexOf("Posted content length of");
if(index>-1){
renderJson(response,Constant.FILE_OVERSETSIZE);
}else{
if(e instanceof IOException){
renderJson(response,Constant.IO_ERROR);
}else{
renderJson(response,Constant.UPLOAD_FAILED);
}
}
logger.error(e.getMessage(),e.getCause());
}else{
logger.info("--- upload file upload error ---");
deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());
}
return;
}
寫好了處理類就是配置了：
web.xml中添加下面配置：
<!--swfUploader -->
<servlet>
<servlet-name>swfUploader</servlet-name>
<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>
<!--上傳的文件大小上限 單位M-->
<init-param>
<param-name>FILE_SIZE_LIMIT</param-name>
<param-value>10</param-value>
</init-param>
<!--一次性上傳的文件個數上限-->
<init-param>
<param-name>FILE_COUNT_LIMIT</param-name>
<param-value>10</param-value>
</init-param>
<!--請求響應編碼格式-->
<init-param>
<param-name>ENCODING</param-name>
<param-value>utf-8</param-value>
</init-param>
<!--是否使用自定義目錄-->
<init-param>
<param-name>USE_CUSTOMDIR</param-name>
<param-value>false</param-value>
</init-param>
<!--自定義的文件保存目錄-->
<init-param>
<param-name>ROOT_UPLOADDIR</param-name>
<param-value>rootUpload</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>swfUploader</servlet-name>
<url-pattern>/swf/upload</url-pattern>
</servlet-mapping>