uploadify3.2.1 + spring mvc 上传

最近做需求需要文件上传，上传文件有点大，找了半天找到uploadify插件，这个插件是php的，网上找了好半天终于解决了所有问题，现在记录一下。

uploadify控件可以实现批量文件上传，提供上传成功失败回调函数等，可以很好的调控上传流程。以下就是我实现 uploadify上传控制插件的内容，比较简陋，请多指教，在这个过程中还出现了很多问题，因为上传你的不是图片，所以找了好多办法，如果是图片的话可以试试ajaxfileupload插件，可以进行图片的上传和及时的显示，但是就是点击上传图片直接就上传上去，不好进行操作；也可以试试html5新的上传文件，现在功能很强大，可以实现异步上传等。

一、下载插件

Uploadify官网下载：http://www.uploadify.com/

二、解压文件后需要一下文件

jquery.uploadify.min.js 迷你版的uploadify js文件，主要功能就靠它了

jquery-1.9.1.js    都懂得，版本没啥要求

uploadify.css     上传组件的美化文件

     uploadify.swf     上传时的动态效果，进度条等

Uploadify-cancel.png    取消上传按钮图片

   我只是用了以上几个，还有别的话可以找找。

三、环境配置

3.1 jsp文件

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

导入js文件和css样式，在样式中还有Uploadify-cancel.png文件路径的配置，到时候需要修改一下。
插件配置：

    /**
   	* 上传节目插件
   	*/
	$(document).ready(function() {

	    $("#file_upload").uploadify({

	        //是否自动上传 true or false
	        'auto':false,

	        //超时时间上传成功后，将等待服务器的响应时间。
	        //在此时间后，若服务器未响应，则默认为成功(因为已经上传,等待服务器的响应) 单位：秒
	        'successTimeout':90,

	        //附带值 JSON对象数据，将与每个文件一起发送至服务器端。
	        //如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值
	       'formData':{       //可以不写
	    	   'userid':tid
	    	   },  
	    	    'onUploadStart': function(file) { 
	    	    	var userid=$('#userid').val();
	    	    	$("#file_upload").uploadify(
	    	    	"settings", 
	    	    	"formData", 
	    	    	{'userid':userid});
	    	    	}, 
	        //flash
	        'swf': "js/uplodify/uploadify.swf",

	        //上传按钮名称
	        'buttonText' : "选择文件",

	         //文件选择后的容器div的id值 
	        'queueID':'uploadfileQueue',

	         //将要上传的文件对象的名称 必须与后台controller中抓取的文件名保持一致    
	        'fileObjName':'pic',

	        //上传地址
	       'uploader':'${pageContext.request.contextPath}/program/uploadFile.do',

	        //浏览按钮的宽度
	        'width':'100',

	        //浏览按钮的高度
	        'height':'32',

	        //在浏览窗口底部的文件类型下拉菜单中显示的文本
	        'fileTypeDesc':'支持的格式：',

	        //允许上传的文件后缀
	        'fileTypeExts':'*.zip',

		     /*上传文件的大小限制允许上传文件的最大 大小。 这个值可以是一个数字或字 符串。
		              如果它是一个字符串，它接受一个单位(B, KB, MB, or GB)。
		              默认单位为KB您可以将此值设置为0 ，没有限制, 
		              单个文件不允许超过所设置的值 如果超过 onSelectError时间被触发*/
	        'fileSizeLimit':'100MB',

	        //允许上传的文件的最大数量。当达到或超过这个数字，onSelectError事件被触发。
	        'queueSizeLimit' : 3,

	        //选择上传文件后调用
	        'onSelect' : function(file) {
	              alert("123");    
	        },

	        'onFallback' : function() {//检测FLASH失败调用  
	            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");  
	        },
	        //返回一个错误，选择文件的时候触发
	        'onSelectError':function(file, errorCode, errorMsg){
	            switch(errorCode) {
	                case -100:
	                    alert("上传的文件数量已经超出系统限制的"
	                     +$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
	                    break;

	                case -110:
	                    alert("文件 ["+file.name+"] 大小超出系统限制的"
	                     +$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
	                    break;

	                case -120:
	                    alert("文件 ["+file.name+"] 大小异常！");
	                    break;

	                case -130:
	                    alert("文件 ["+file.name+"] 类型不正确！");
	                    break;
	            }
	        },

	        //上传到服务器，服务器返回相应信息到data里
	        'onUploadSuccess':function(file, data, response){
	            alert("上传成功");
	        },

	      //当单个文件上传出错时触发
	        'onUploadError': function (file, errorCode, errorMsg, errorString) { 
	        	alert("上传失败");
	        	} 
	    });

	});

上传按钮显示位置代码：（版本不同写法不同我的是3.2.1版本）

   <div id="uploadfileQueue"></div> //上传插件文件显示
     <input type="file" id="file_upload" value="请选择文件">//上传插件选择按钮
    <input type="button" value="上传" οnclick="javascript:$('#file_upload').uploadify('upload','*');"/>
    <input type="button" value="取消上传" οnclick="javascript:$('#file_upload').uploadify('stop')"/>

以上是固定写法，请把id对应好js中配置的id，选择文件后点击上传就可以。

3.2 SpringMVC配置

导入jar包 commons-fileupload-1.3.1.jar   commons-io-2.2.jar

SpringMVC配置文件xml multipart 的解析器：

<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
          <property name="defaultEncoding" value="utf-8" /> 
           <!-- 指定所上传文件的总大小不能超过10485760KB。注意maxUploadSize属性的限制不是针对单个文件 --!>
           <!-- 而是所有文件的容量之和 --!>   
          <property name="maxUploadSize" value="10485760000" />  
          <property name="maxInMemorySize" value="40960" />  
    </bean> 

在controller中实现：

@Controller
public class ImpProController {
	//pic为接受参数，要和js配置相同
	public String uploadFile(@RequestParam("pic") CommonsMultipartFile pic,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException, Exception {// 设置文件保存的本地路径
		String filePath = request.getSession().getServletContext().getRealPath(
				"/uploadFiles/");
		String fileName = pic.getOriginalFilename();
		// 文件去掉后缀的名称
		String fileNames = fileName.split("[.]")[0];
		String fileType = fileName.split("[.]")[1];
		// 为了避免文件名重复，在文件名前加UUID
		String uuid = UUID.randomUUID().toString().replace("-", "");
		String uuidFileName = uuid + fileName;

		// 将文件保存到服务器
		String fis = FileUtil.upFile(pic.getInputStream(), uuidFileName,
				filePath);
                return succ;
		}
	/**
	 * @Description		单个文件上传写入功能
	 * @Date			2016年12月9日上午10:55:31
	 * @param is		传入的流
	 * @param fileName	文件路径
	 * @param filePath	文件名
	 * @return			失败返回1，成功返回路径
	 */
	public static String upFile(InputStream is, String fileName, String filePath) {
		//初始化参数来判断是否写入成功
		String files = "1";
		
		FileOutputStream fos = null;

		BufferedOutputStream bos = null;

		BufferedInputStream bis = null;

		//判断文件夹是否存在
		File file = new File(filePath);

		if (!file.exists()) {

			file.mkdirs();

		}

		//获取写入文件位置
		File f = new File(filePath + "/" + fileName);

		try {

			bis = new BufferedInputStream(is);

			fos = new FileOutputStream(f);

			bos = new BufferedOutputStream(fos);

			byte[] bt = new byte[4096];

			int len;

			while ((len = bis.read(bt)) > 0) {

				bos.write(bt, 0, len);

			}
			//写入成功把路径赋值
			files = f.toString();
		} catch (Exception e) {

			e.printStackTrace();

		} finally {
			//关闭流
			try {

				if (null != bos) {

					bos.close();

					bos = null;
				}

				if (null != fos) {

					fos.close();

					fos = null;

				}

				if (null != is) {

					is.close();

					is = null;

				}

				if (null != bis) {

					bis.close();

					bis = null;

				}

			} catch (Exception e) {

				e.printStackTrace();

			}

		}
		return files;
	}
}

记得导入需要的jar包。

四、总结

1 实现多文件上传，其实就是一个个上传，不会同步多文件上传。

2 可以很清楚的知道文件上传的过程，进行操作管理，可以在onUploadSuccess函数中获取。

3 以上文件上传的是服务器，重新部署后会丢失，请把文件转移到安全的目录下面。