uploadify struts2實現(xiàn)圖片上傳
來源:程序員人生 發(fā)布時間:2015-04-11 08:58:54 閱讀次數(shù):3495次
uploadify是來自國外的1款優(yōu)秀的jQuery上傳插件,主要功能是批量上傳文件,帶進度顯示。
包括兩個版本,1個是Flash的 1個是HTML5的。下面介紹Flash版本如何使用
1、下載 Uploadify Zip
2、解緊縮包并上傳以下文件到您的網站上的1個文件夾:
jquery.uploadify.min.js
uploadify.css
uploadify-cancel.png
uploadify.swf
3、在您使用uploadify頁面也不要忘了引入jQuery庫
4、在頁面引入以下文件
<script type="text/javascript" src="uploadify/
jquery⑴.8.0.min.js"></script>
<script type="text/javascript" src="uploadify/
jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
5、頁面添加file input<input type="file" name="file_upload" id="file_upload" />
6、初始化uploadify$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'fileUploadAction.action'
// Put your options here
});
});
7、終究頁面應當像以下這樣<%@ page language="java" import="java.util.*" pageEncoding="utf⑻"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>uploadify</title>
<script type="text/javascript" src="uploadify/
jquery⑴.8.0.min.js"></script>
<script type="text/javascript" src="uploadify/
jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify( {
'swf' : 'uploadify/uploadify.swf',
'uploader' : 'fileUploadAction.action', //處理上傳文件Action路徑
'fileObjName' : 'file', //文件對象
'buttonText' : '選擇文件', //按鈕顯示文字
});
});
</script>
</html>
更多uploadify屬性請參考http://www.uploadify.com/documentation/
處理上傳文件Action省略,需要的可以下載源碼:download
效果如圖:

作者:itmyhome
轉載請注明出處:http://blog.csdn.net/itmyhome1990/article/details/44062283
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈