springside4使用Jquery uploadify3.2上传文件

 

首先需要使用的uploadify插件，包含以下几个主要文件

jquery.min.js（uploadify3.2使用的是jquery-1.7.2.版本）

jquery.uploadify.min.js（开发建议使用jquery.uploadify.js）

uploadify.swf

uploadify.css

 

在页面中引入相关的js和css文件

 

<script src="${ctx}/static/jquery/uploadify/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/static/jquery/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/jquery/uploadify/uploadify.css">

 

在页面中的uploadify组件

<h1>Uploadify Demo</h1>
  <form> 
    <div id="queue"></div>
    <input id="file" name="file" type="file" multiple="true">
  </form>

 

js部分的操作代码

	<script type="text/javascript">
	$(function() {
		$("#file").uploadify({
			method   : 'post',
			swf           : '${ctx}/static/jquery/uploadify/uploadify.swf',  // uploadify.swf在项目中的路径
			uploader      : '${ctx}/utils/uploadify',  // 后台UploadController处理上传的方法
			fileObjName     : 'file',         // The name of the file object to use in your server-side script
			fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
			successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
			removeCompleted : false,              // Remove queue items from the queue when they are done uploading
			fileSizeLimit : '10MB',
			buttonText 		: '选择文件',
			height        : 30,
			width         : 120
		});
	});
	</script>

	<h1>UPLOADIFY DEMO</h1>
	<div class="controls">
		<div id="queue"></div>
		<input id="file" name="file" type="file" multiple="true">	
	</div>
	

 

在spring-mvc.xml做相应的上传文件配置

	<bean id="multipartResolver"  
	    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
	    <property name="defaultEncoding">  
	        <value>UTF-8</value>  
	    </property>  
	    <property name="maxUploadSize">  
	        <value>32505856</value><!-- 上传文件大小限制为31M，31*1024*1024 -->  
	    </property>  
	    <property name="maxInMemorySize">  
	        <value>4096</value>  
	    </property>  
	</bean> 	

 

在后台处理文件上传的Controller操作

package com.nnwufang.herosp.web.utils;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

@Controller
@RequestMapping(value="/utils")
public class UploadController{
	/**
	 * 上传文件
	 * @return
	 * @throws IOException 
	 * @throws IllegalStateException 
	 */
	@RequestMapping(value = "/uploadify", method = RequestMethod.POST)
	@ResponseBody
	public String upload(HttpServletRequest request, HttpServletResponse response){
		
		String responseStr="";
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  

	    Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();  
	    // 文件保存路径
	    String ctxPath=request.getSession().getServletContext().getRealPath("/")+File.separator+"uploadFiles"; 
	    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
		String ymd = sdf.format(new Date());
		ctxPath += File.separator + ymd + File.separator;
		// 创建文件夹
	    File file = new File(ctxPath);  
	    if (!file.exists()) {  
	        file.mkdirs();  
	    }  
	    String fileName = null;  
	    for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {  
	    	// 上传文件 
	    	MultipartFile mf = entity.getValue();  
	    	fileName = mf.getOriginalFilename();
	    	String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
			// 重命名文件
			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
			String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
	     	File uploadFile = new File(ctxPath + newFileName);  
	     	try {
		    	FileCopyUtils.copy(mf.getBytes(), uploadFile);
				responseStr="上传成功";
		    } catch (IOException e) {
				responseStr="上传失败";
				e.printStackTrace();
		    }  
	  	} 
	    return responseStr;
	}
}

 

初步学习springside4，在使用uploadify实现文件上传功能的过程中报出了java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory的异常，在项目中导入commons-fileupload-1.2.2.jar问题就解决了。希望对大家有所帮助！

 

评论

3 楼 mfan 2013-04-19  

hua758209 写道

求源码，本人比较笨啊，没完整代码看不懂

springside4可以到https://github.com/springside/springside4上下载，只是简单的将uploadify整合到框架中，配置spring-mvc.xml,结合前台js、html和后台的Controller就容易理解了

2 楼 hua758209 2013-04-09  

求源码，本人比较笨啊，没完整代码看不懂

1 楼 hua758209 2013-04-09  

怎么跟springside整合的代码一句也没有