SpringMVC与uploadify结合进行上传

uploadify是一个第三方js插件，支持多文件上传，拥有较为强大的上传功能

1、uploadify实现

下载其flash版本

http://www.uploadify.com/ 

解压后将其内容区分后倒入

将jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png导入到项目中，注意路径，路径不对可能导致取消图片的显示失败

在页面中引入jquery与 jquery.uploadify.min.js，css

<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
<link href="${pageContext.request.contextPath}/statics/js/uploadify/uploadify.css" rel="stylesheet"
      type="text/css"/>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.min.js"
        type="text/javascript"></script>

初始化页面并使用

   
   
   

    
    
    
 $(function () {
    
    
    
 $("#uploadify").uploadify({
    
    
    
 //指定swf文件
    
    
    
 'swf': '${pageContext.request.contextPath}/statics/js/uploadify/uploadify.swf',
    
    
    
 //后台处理的页面
    
    
    
 'uploader': '${pageContext.request.contextPath}/background/questionResolveUpload',
    
    
    

    
    
    
 //按钮显示的文字
    
    
    
 'buttonText': '选择文件',
    
    
    
 //显示的高度和宽度，默认 height 30；width 120
    
    
    
 //'height': 15,
    
    
    
 //'width': 80,
    
    
    
 //上传文件的类型 默认为所有文件 'All Files' ; '*.*'
    
    
    
 //在浏览窗口底部的文件类型下拉菜单中显示的文本
    
    
    
 'fileTypeDesc': 'ALL Files',
    
    
    
// 'fileTypeDesc': 'ALL Files',
    
    
    
 //允许上传的文件后缀
    
    
    
// 'fileTypeExts': '*.gif; *.jpg; *.png',
    
    
    
 //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
    
    
    
 //'queueID': 'fileQueue',
    
    
    
 //选择文件后自动上传
    
    
    
 queueSizeLimit: 999,
    
    
    
 'auto': false,
    
    
    
 //设置为true将允许多文件上传
    
    
    
 'multi': true,
    
    
    
 "onUploadSuccess": function (file, data, response) {
    
    
    
// alert('The file ' + file.name
    
    
    
// + ' was successfully uploaded with a response of '
    
    
    
// + response + ':' + data);
    
    
    
 dataJson = eval("(" + data + ")");
    
    
    
// 上传后消息回复
    
    
    
 resolveResult(dataJson.messageContent, file.name);
    
    
    
 },
    
    
    
 "onUploadError": function (file, errorCode, errorMsg,
    
    
    
 errorString) {
    
    
    
// 插件出现错误时的问题
    
    
    
 alert('The file ' + file.name
    
    
    
 + ' could not be uploaded: ' + errorString);
    
    
    
 },
    
    
    
 "onSelectError": function () {
    
    
    
 alert('The file ' + file.name
    
    
    
 + ' returned an error and was not added to the queue.');
    
    
    
 },
    
    
    
 'onUploadStart': function () {
    
    
    
 $('#uploadify').uploadify('settings', 'formData', {
    
    
    
 "competition": $('#competition').val()
    
    
    
 });
    
    
    
 }
    
    
    
 });
    
    
    
 });
   
   
   

请注意如果想要动态传输参数的话，请在onUploadStart方法中书写，而不是在配置的时候书写

controller：

   
   
   

    
    
    
 public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {
    
    
    
//解析文件
    
    
    
 RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();
    
    
    
 MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);
    
    
    
//解析文件结束
    
    
    
 MessageCarrier messageCarrier = upload(multipartFile, path);
    
    
    
 return messageCarrier;
    
    
    
 }
   
   
   

直接使用request进行接收后解析即可

其余参数则使用

   
   
   

    
    
    
request.getParameter("competition")
   
   
   

来解析即可

当uploadify进行多个文件上传的时候会多次向后台服务器发送请求，所以我们只需要按照单一文件解析即可

附 属性详解  来源：  http://blog.csdn.net/xuzheng_java/article/details/41143769

属性	默认值	说明
auto	true	设置为true，当选择文件后就可以直接上传，为false需要点击上传按钮才上传。
buttonClass	empty String	按钮样式，默认为空字符串。
buttonCursor	‘hand’	鼠标指针悬停在按钮上的样式。
buttonImage	null;	浏览按钮的图片路径。
buttonText	‘SELECT FILES’	浏览按钮的文本。3
checkExisting	false	文件上传重复性检查程序，检查即将上传的文件在服务器端是否已经存在，存在返回1，不存在返回0。
debug	false	如果设置为true，则表示启用SWFUpload的调试模式。
fileObjName	'‘Filedata’	文件上传对象的名称，如果命名为the_files,PHP程序可以用$_FILES['the_files']来处理上传的文件对象。
fileSizeLimit	0	上传文件的大小限制，如果为整数型，则表示以KB为单位的大小，如果是字符串，则可以使用(B、KB、MB、GB)为单位，比如2MB，如果设置为0则表示无限制。
fileTypeDesc	All Files	这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如果设置fileTypeDesc为：请选择rar doc pdf文件等。
fileTypeExts	*.*	设置可以选择的文件的类型，格式如：*.doc;*.pdf;*.rar。
formData		JSON格式上传每个文件的同时提交到服务器的额外数据，可在onUploadStart事件中使用settings方法动态设置。
height	30	设置浏览按钮的高度，默认值。
itemTemplate	false	用于设置上传队列的HTML模板，可以使用以下标签：instanceID-Uploadify实例的ID，fileID队列中此文件的ID，或者理解为此任务的ID，fileName文件的名称，fileSize当前上传的文件大小
method	Post	提交方式Post或Get。
multi	true	设置为true时可以上传多个文件。
overrideEvents		设置哪些事件可以被重写，JSON格式，如:overrideEvents:['onUploadProgress']
preventCaching	true	如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果。
progressData	'percentage'	设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度。
queueID	false	设置上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。
queueSizeLimit	999	队列最多显示的任务数量，如果选择的文件数量超过此限制，将会发出onSelectError事件。此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。
removeCompleted	true	是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。
removeTimeout	3	如果设置了任务完成后自动从队列中删除，则可以规定从完成到被移除的时间间隔。
requeueErrors	false	如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。

successTimeout	30	文件上传成功后，服务端返回成功标志，此项设置返回结果的超时时间。
swf	‘uploadify.swf’	uploadify.swf文件的相对路径。
uploader	uploadify.php/uploadify.action	后台处理程序的相对路径。
uploadLimit	999	最大上传文件数量，如果达到或者超出限制将会触发onUploadError事件。
width	120	设置文件浏览按钮的宽度。

代码有高亮格式版本： http://fromwiz.com/share/s/3cTmX51TMQ-b2QTact03UPg83jorac2VJQcH23-ZmX1a3TSs 

附件列表