uploadify3.2.1 + struts2 解析上传excel

最新推荐文章于 2021-06-19 17:01:43 发布

dengqi0832520

最新推荐文章于 2021-06-19 17:01:43 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dengqi0832520/article/details/73527720

本文介绍如何利用Uploadify插件实现文件上传功能，并详细展示了从引入必要的JS和CSS文件到编写JavaScript代码的过程，最后通过示例代码展示了如何在服务器端处理上传的Excel文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次接触uploadify，感觉有点新鲜，然后做了一个上传excel并解析数据的功能。

在博客里面也看了很多，但大多都是 uploadify + springMvc 的上传例子。

废话不多说，上代码吧。

首先下载好压缩文件uploadify.zip，解压。添加js到项目中，jquery.uploadify.min.js 这个可以不要。注意：这里必须要引入 swfobject.js ,我之前没引入，导致一直用不了，错误原因是：Uncaught TypeError: Cannot read property 'queueData' of undefined

然后引入js和css：

<script src="<%= request.getContextPath() %>/scripts/jquery/uploadify/jquery.uploadify.js"></script>
<script src="<%= request.getContextPath() %>/scripts/jquery/uploadify/swfobject.js"></script>
<link rel="stylesheet" href="<%= request.getContextPath() %>/scripts/jquery/uploadify/uploadify.css">

下面是上传按钮：

<input type="file" id="uploadify" name="uploadify">  
<div id="fileQueue"></div>  
	<a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>  
	<a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>  
</div>

然后是js代码：因为第一次用，很多参数没有配置，后面再慢慢研究。

<script type="text/javascript">
	$(function() {
		upLoad();
        });
        
        function upLoad(){  
            $("#uploadify").uploadify({    
            'auto'           : false, //选完文件后是否自动上传   
            'swf'            : '<%=request.getContextPath()%>/scripts/jquery/uploadify/uploadify.swf',  //引入uploadify.swf  
            'uploader'       : '<%=request.getContextPath()%>/cls/clearsettle/upload.do',//请求路径  
            'queueID'        : 'fileQueue',//队列id,用来展示上传进度的    
            'queueSizeLimit' : 3,  //同时上传文件的个数  
            'width '        : 120,
            'progressData' : 'percentage',//进度条显示的数据
            'buttonText'     :'上传文件',//按钮显示中文
            'multi'          : true,  //允许多文件上传  
            'fileSizeLimit' : '200MB', //设置单个文件大小限制   
            'fileObjName' : 'uploadFile',  //<input type="file"/>的name  
            'method' : 'post',  
            'removeCompleted' : false,//上传完成后自动删除队列  
            'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发  
                //data就是action中返回来的数据  
            	$('#' + file.id).find('.data').html(' 上传完毕');
            },  
            'onQueueComplete' : function(){//所有文件上传完成  
            	if(queueData.uploadsErrored >1){
                    //存在失败的数据
                    return ;
                }
            }  
        });    
                          
        }  
</script>

'removeCompleted' : false,//查了很多，说的是设置为false 之后上传完毕就自动删除上传队列，但是我试了true和false都没有效果，如果有大神知道哪里搞错了，麻烦指教指教。

然后是action代码：

        /*
	 * 命名必须跟jsp页面中的uploadify的一个参数"fileObjName"一致，否则无法获取到上传的文件
	 */
	public File uploadFile;

	@Action(value = "upload",results = {
	    @Result(name = "success", type = "dispatcher", location = "/pages/aps/cls/xxxxxxxx_goUpload.jsp"), 
	    @Result(name = "default", type = "dispatcher", location = "/pages/aps/cls/xxxxxxxx_goUpload.jsp")})
        public String upload() {
		if(uploadFile == null){
			return null;
		}
		List<ClearSettleSearch> result = new ArrayList<ClearSettleSearch>();
		try {
			String path = uploadFile.getPath();
			FileInputStream in = new FileInputStream(path);
			Workbook wb = new XSSFWorkbook(in);
			Sheet sheet = wb.getSheetAt(0);	
			for(Row r : sheet){
				if(r.getRowNum() < 1){
					continue;
				}
				 
				ClearSettleSearch info = new ClearSettleSearch();
				r.getCell(0).setCellType(Cell.CELL_TYPE_STRING);//这里传进来是一个double类型，所以要设置一下
				info.setId(Long.valueOf(r.getCell(0).toString()));
				
				info.setMchCode(r.getCell(1).getStringCellValue());
				info.setResult(r.getCell(8).getStringCellValue());
				result.add(info);
			}
			in.close();
			return SUCCESS;
		} catch (Exception e) {
			e.printStackTrace();
		}
		saveErrorMessage("上传失败");
		return "default";
	}

效果：

这样，一个上传功能就算完成了。