JQuery Uploadify3.2 + SpringMVC 文件上傳
來源：程序員人生 發布時間：2015-03-09 08:17:01 閱讀次數：2982次
1.引入頭文件（jQuery放前面，而且不能有多個JQuery）
<script type="text/javascript" src="js/
jquery⑴.6.2.js"></script>
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
<script type="text/javascript" src="js/uploadify/
jquery.uploadify.min.js"></script>
</head>
<script >
$(document).ready(function() {
$("#file_upload").uploadify({
'buttonText' : '請選擇', //上傳按鈕顯示內容，還有個屬性可以設置按鈕的背景圖片
'height' : 30,
'swf' : 'js/uploadify/uploadify.swf', // 控件flash文件位置
'uploader' : 'test/uploadFile.do', // 后臺處理的要求地址，后面追加了jsessionid，用來標示使用當前session（默許是打開新的session，會致使存在session校驗的要求中產生302毛病）
// 'upload.action;jsessionid=<%=session.getId() %>',
// 'upload.action ;jsessionid=${pageContext.session.id},
'cancelImg' : 'js/uploadify/uploadify-cancel.png',
'width' : 120,
'fileSizeLimit' : '1000KB',
'multi' : false, // true 選擇多文件上傳
'auto':false, // true自動上傳
'fileObjName' : 'file', //文件對象名稱,用于后臺獲得文件對象時使用,詳見下面的java代碼
'fileTypeExts' : '*.jpg;*.png;*.xls', //控制可上傳文件的擴大名，啟用本項時需同時聲明fileDesc
// 'overrideEvents' : ['onDialogClose'], //不履行默許的onSelect事件
// 'queueID':'file_upload', //文件選擇后的容器ID，與下面HTML的div.id對應
// 'fileObjName':'myFile',//
服務器端腳本使用的文件對象的名稱 $_FILES個['upload']
// 'buttonImage':'${pageContext.request.contextPath}/js/
jquery.uploadify/uploadify-cancel.png', //閱讀按鈕的背景圖片路徑
// 'width':'100', //閱讀按鈕的寬度
// 'height':'32', //閱讀按鈕的高度
'onFallback' : function() {//檢測FLASH失敗調用
alert("您未安裝FLASH控件，沒法上傳圖片！請安裝FLASH控件后再試。");
},
'onUploadSuccess' : function(file, data, response) {
alert( file.name + ' 上傳成功！ ');
var obj = eval('('+data+')');
alert(obj.message);
// $('#showUploadMsg').html(obj.message);
}
});
});
</script>
其他事件可以查詢在線api 地址： http://www.uploadify.com/documentation/
2. 上傳按鈕
<body>
<input type="file" name="fileName" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload', '*')">上傳文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上傳!</a>
</body>
3. 后臺處理
@RequestMapping(value = "/uploadFile.do", method = RequestMethod.POST)
public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletResponse response) throws IOException {
// System.out.println(file.getOriginalFilename());
System.out.println("成功！");
String message = "測試測試";
response.setCharacterEncoding("UTF⑻");
response.getWriter().write("{"message":"" + message + ""}");
response.getWriter().flush();
return "jsp/index";
}
下載/資料：
Uploadify官方網站：http://www.uploadify.com/
Uploadify下載：http://download.csdn.net/detail/leixiaohua1020/6376463
demo：鏈接：http://pan.baidu.com/s/1jGsv4Gm 密碼：gcw4
jar : 鏈接：http://pan.baidu.com/s/1AmNgU 密碼：8qn9
手冊：鏈接：http://pan.baidu.com/s/1pJBikCr 密碼：or37
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
