Struts通过Jquery Uploadify实现文件批量上传

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

dragonwuboy

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

阅读量804

点赞数

文章标签： struts2 uploadify 文件批量上传

本文链接：https://blog.csdn.net/dragonwuboy/article/details/12969465

版权

最近需要实现文件的批量上传，找了些，终于发现了一个比较不错的。Uploadify是一个Jquery框架下处理批量文件上传的插件，支持多种服务器端软件。在网上也能找到很多的相关例子，很多地方他们说的都不一样，按照那些例子的配置，我没有实现功能。最后一番纠结终于实现了功能。下面就来介绍一下：

HTML

需要的资源，这些都可以从网上下得到，具体不再赘述。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script> 
<link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />

关键代码：

这里是将body里的文件上传控件绑定到uploadify

<script type="text/javascript"> 
        $(document).ready(function() { 
            $("#uploadFile").uploadify({ 
                /*注意前面需要书写path的代码*/ 
                'swf'        :    'uploadify/uploadify.swf', 
                'uploader'   :    'uploadUtil.action', 请求的Action
                'cancelImg'      : 'uploadify/cancel.png',
                'method'        : 'get',  
                'queueID'        : 'fileQueue', //和存放队列的DIV的id一致 
                'fileObjName'   : 'uploadFile',//和input的name属性值保持一致就好，Struts2就能处理了   
                'auto'           : false, //是否自动开始 
                'multi'          : true, //是否支持多文件上传 
                'buttonText'     : 'Browse', //按钮上的文字
                'simUploadLimit' :  20, //一次同步上传的文件数目 
                'sizeLimit'      : 19871202, //设置单个文件大小限制                
    //            'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 
    //            'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式   
       			'queueSizeLimit' : 10, //限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。
   				'fileSizeLimit'	: 50*1024*1024, //设置单个文件大小限制，单位为byte ,50M
   				'removeCompleted': true,
   				'removeTimeout' : 0.5,
   				'requeueErrors'	: true,
	         //  	'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal,queueBytesLoaded) {

   			// 		$("#result").append("<div>文件\""+file.name+"\"共"+totalBytesTotal+"字节，已上传"+totalBytesUploaded + "字节!</div><br/>");
   			// 		if(totalBytesUploaded==totalBytesTotal){
   			// 			$("#result").append("<div>文件\""+file.name+"\"上传成功！</div><br/>");
   		//	 		}
   	     //   	},
   				'onUploadComplete' : function(file) {
   					//	$("#result").append("<div>文件"+file.name+"上传成功！</div><br/>");
   		        },
   		//		'onUploadSuccess' : function(file,data,response) {	
	   				//	alert(data);
	   		//				var retdata=eval("(" + data + ")");
	   				//		alert(retdata.msg);
	   					//提示消息
	   		//			$("#result").append("<div>"+retdata.msg+"</div><br/>");
   			//	},
   				'onUploadError' : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
 					    $("#result").html(errorString);
   				},
            }); 

        }); 
        </script>

Body的代码很干净

<body>
<input type="file" name="uploadFile" id="uploadFile" /> 
<div id="fileQueue"></div> 
<a href="javascript:$('#uploadFile').uploadify('upload','*')">上传文件</a> 
<a href="javascript:$('#uploadFile').uploadify('cancel', '*')">取消所有上传</a> 
</body>

struts配置

<struts> 
    <package name="commonutil" extends="struts-default">     
       <action name="uploadUtil" class="XXXX.UploadUtilAction" method="uploadFile"> 
       </action>       
    </package> 
</struts>

Action代码

public class UploadUtilAction { 

    private File   uploadFile; //名字要和前面js里的 'fileObjName'名字一致
    private String uploadFileFileName; //上传来的文件的名字 
    private String msg;
    
public String uploadFile() throws Exception { 
	 try {
		String extName = "";
		String newFileName = "";
		
		if (uploadFileFileName.lastIndexOf(".") >= 0) {
			extName = uploadFileFileName.substring(uploadFileFileName
					.lastIndexOf("."));
		}

		File targetFile = new File("f:/", uploadFileFileName);					
		FileUtils.copyFile(uploadFile, targetFile);
		msg = "文件上传成功";
	} catch (Exception e) {
		msg = "文件上传失败!";
		e.printStackTrace();
	}
	return null; 
    }
public File getUploadFile() {
	return uploadFile;
}


public void setUploadFile(File uploadFile) {
	this.uploadFile = uploadFile;
}


public String getUploadFileFileName() {
	return uploadFileFileName;
}


public void setUploadFileFileName(String uploadFileFileName) {
	this.uploadFileFileName = uploadFileFileName;
}


public String getMsg() {
	return msg;
}


public void setMsg(String msg) {
	this.msg = msg;
} 

}

这样就可以实现文件批量上传了，效果还是不错的。带进度条的上传控件。。

dragonwuboy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Struts通过Jquery Uploadify实现文件批量上传

最近需要实现文件的批量上传，找了些，终于发现了一个比较不错的。Uploadify是一个Jquery框架下处理批量文件上传的插件，支持多种服务器端软件。在网上也能找到很多的相关例子，很多地方他们说的都不一样，按照那些例子的配置，我没有实现功能。最后一番纠结终于实现了功能。下面就来介绍一下：HTML需要的资源，这些都可以从网上下得到，具体不再赘述。关键代码：这里是
复制链接

扫一扫