struts2结合uploadify3.2实现文件上传

最新推荐文章于 2018-05-21 17:29:02 发布

程序员Monkey

最新推荐文章于 2018-05-21 17:29:02 发布

阅读量2.4k

点赞数 2

分类专栏： JS+Jquery

本文链接：https://blog.csdn.net/HarderXin/article/details/9022439

版权

JS+Jquery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、请下载uploadify3.2插件，下载地址：http://download.csdn.net/detail/harderxin/5515929
4、uploadify官方地址：http://www.uploadify.com/，可以随时关注，版本不同，其中内置的函数会有所不同
2、注意：jquery版本须为jquery-1.7.2.min.js，1.4版本不支持，上面下载中的内容已经包含在里面了，必须安装swf文件才能运行
3、在jsp页面中引入插件
<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
4、页面效果：其中自带进度条

5、页面js脚本

	<script type="text/javascript">
		$(function() {
			$('#file_upload').uploadify({
				'swf'      : 'uploadify/uploadify.swf',//swf文件
				//指向后台操作的action，可以带参数
				'uploader' : 'imageOperate!uploadReportImg.do?reportId=${reportId}&operateType=${operateType}&planId=${planId}',
				'auto'	   : false,//是否自动上传
				'height':25,//按钮的高度
				'multi':true,//是否进行多文件上传
				'buttonText':'选择文件',//浏览文件按钮文本
				'fileObjName':'file',//后台接收表单控件的名字，必须与后台名称保持一致，相当与input type=file的name属性
				'queueID':'fileQueue',//绑定显示上传队列的div
				'fileTypeExts':'*.jpg;*.png;*.gif;',//限制文件上传的类型
				'method'   : 'post',//提交方式
				'removeTimeout':1,//上传完成后队列多长时间后消失
    			'onUploadSuccess' : function(file, data, response) {//每个上传完成并成功的文件都会触发本事件
					if(data=="success"){
						//$('#msg').html('图片上传成功!');
					}else{
						top.Dialog.alert("图片上传失败!");
					}
    			},
    			'onQueueComplete':function(queueData){//队列全部上传触发函数
    				top.Dialog.alert(queueData.uploadsSuccessful+"张图片上传成功!",function(){
    					top.Dialog.close();
    				});
    			},
    			//检测FLASH失败调用 
    			'onFallback':function(){
    				top.Dialog.alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试!");
    			}
			});
		});
	</script>

页面文件

<body rel="layout">
     <input type="hidden" id="reportId" value="${reportId}"/>
     <input type="hidden" id="planId" value="${planId}"/>
     <input type="hidden" id="operateType" value="${operateType}"/>
    <div class="ui-layout-center">
        <div class="header">
        	<table align="center"><tr>
        	    <td style="width: 90px;"><input type="file" name="file_upload" id="file_upload" /></td>
        		<td width="90px" align="right"><input type="button" value="开始上传" onclick="javascript: $('#file_upload').uploadify('upload','*');" style="background: #505050;color:white;height:28px;margin-bottom: 0.5em;"/></td>
        		<td width="90px" align="right"><input type="button" value="取消上传" onclick="javascript: $('#file_upload').uploadify('cancel','*');" style="background: #505050;color:white;height:28px;margin-bottom: 0.5em;"/></td>
        		<td width="90px" align="right"><span style="color:red;" id="msg"></span></td>
        	</tr></table>
        </div>
        <div class="content" id="fileQueue" style="margin: 10px 10px 10px 150px">
        </div>
   </div>
</body>

6、编写后台处理action


/**
 * 图像操作Action
 * @author Administrator
 *
 */
public class ImageOperateAction {
	//文件上传,与前台页面的fileObjName保持一致
	private File[] file;
	private String[] fileFileName;


	public File[] getFile() {
		return file;
	}

	public void setFile(File[] file) {
		this.file = file;
	}

	public String[] getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String[] fileFileName) {
		this.fileFileName = fileFileName;
	}
	
	/**
	 * 上传报活图片
	 * @return
	 * @throws Exception 
	 */
	public String uploadReportImg() throws Exception{
            //这样我们就可以得到file和fileName对象，进行我们的逻辑操作啦
            System.out.println("file='+file);
	    System.out.println("fileName='+fileFileName[0]);
	}

	
}

这样我们就灵活的运用了struts2和uploadify的结合，更多的uploadify3.2版本参数可参见：

http://www.zhixing123.cn/php/33074.html

实例也可参见：http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml

程序员Monkey

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
struts2结合uploadify3.2实现文件上传

1、请下载uploadify3.2插件，下载地址：http://download.csdn.net/detail/harderxin/55159294、uploadify官方地址：http://www.uploadify.com/，可以随时关注，版本不同，其中内置的函数会有所不同2、注意：jquery版本须为jquery-1.7.2.min.js，1.4版本不支持，上面下载中的内容已经包含在里...
复制链接

扫一扫

专栏目录