SpingMvc 结合Huploadify 进行异步上传图片

刚开始 采用的 是uploadify 插件集成的 springMvc  但是后来发现 uploadify会受到flash的限制，会产生跨域问题。 然后就换成了Huploadify 插件。解决的由flash控件引起的跨域问题。下面 来说下具体实现。 

首先 在你的springMvc里面加入这个配置。 具体配置含义 可以百度。

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
      <property name="maxUploadSize" value="104857600"/>  
      <property name="maxInMemorySize" value="4096"/>  
</bean> 

然后是 

后台java 代码

配置两个值即可：1，配置你的上传图片路径

2.配置返回值，一般是配置上传后的图片路径

@RequestMapping(value = "/upload")
@ResponseBody
public String upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
String filePath = " ";//请配置你的图片存储地址
String fileName="";
try {
// String savePath = "C://uploads/";
File dirPath = new File(filePath);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
// 解析器解析request的上下文
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 先判断request中是否包涵multipart类型的数据，
if (multipartResolver.isMultipart(request)) {
// 再将request中的数据转化成multipart类型的数据
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
@SuppressWarnings("rawtypes")
Iterator iter = multiRequest.getFileNames();
while (iter.hasNext()) {
MultipartFile file = multiRequest.getFile((String) iter.next());
if (file != null) {
fileName = file.getOriginalFilename();
if(fileName.indexOf(".") != -1){
fileName =UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.indexOf("."),fileName.length());
}
System.out.println(fileName);
File localFile = new File(filePath + fileName);
// 写文件到本地
file.transferTo(localFile);
//response.getWriter().print(fileName + "        上传成功！");
}
}
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return returnJSON(-1,"上传失败");
}
return returnJSON(0,filePath +fileName);//配置你上传成功的返回值，。 一般是返回图片路径
}

前端页面： 

Huploadify Git下载地址：https://github.com/Double-Lv/Huploadify

下载后如下css和js文件在head中引入（jQuery.Huploadify.js要在jquery库文件后引入）：

Huploadify.css 

jquery.Huploadify.js

 <div class="btn-group" id="upload"></div>

$("#upload").Huploadify({  
         auto:true,  
         fileTypeExts:'*.*',  
         multi:false,  
         fileObjName:'Filedata',  
         fileSizeLimit:99999999999,  
         showUploadedPercent:false,  
         buttonText:'上传',  
         uploader:"../upload",  
         onUploadSuccess:function(file,data){  
    var dataJson = eval("(" + data + ")");
          if(dataJson.code==0){ //上传成功 进行操作返回值 自己定义
          $("#showDiv").empty();
          $("#logo").val(dataJson.msg);
          var html = '<img src="'+dataJson.msg+'" width="115" height="115" />';
          $("#showDiv").html(html);
          }else{
          alert(dataJson.msg);
          }
         },  
         onUploadError:function(file,response){  
             jQuery.longhz.alert("上传失败!");  
         }  
     });  

1. onUploadSuccess：在返回状态status为200时触发  
2. onUploadError：返回状态status不为200时触发  
3. onUploadComplete：在onUploadSuccess或onUploadError触发后触发  

注：Huploadify的参数配置可以参考

1. var defaults = {  
2.             fileTypeExts:'*.*',//允许上传的文件类型，格式'*.jpg;*.doc'  
3.             uploader:'',//文件提交的地址  
4.             auto:false,//是否开启自动上传  
5.             method:'post',//发送请求的方式，get或post  
6.             multi:true,//是否允许选择多个文件  
7.             formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}  
8.             fileObjName:'file',//在后端接受文件的参数名称，如PHP中的$_FILES['file']  
9.             fileSizeLimit:2048,//允许上传的文件大小，单位KB  
10.             showUploadedPercent:true,//是否实时显示上传的百分比，如20%  
11.             showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M  
12.             buttonText:'选择文件',//上传按钮上的文字  
13.             removeTimeout: 1000,//上传完成后进度条的消失时间，单位毫秒  
14.             itemTemplate:itemTemp,//上传队列显示的模板  
15.             onUploadStart:null,//上传开始时的动作  
16.             onUploadSuccess:null,//上传成功的动作  
17.             onUploadComplete:null,//上传完成的动作  
18.             onUploadError:null, //上传失败的动作  
19.             onInit:null,//初始化时的动作  
20.             onCancel:null,//删除掉某个文件后的回调函数，可传入参数file  
21.             onClearQueue:null,//清空上传队列后的回调函数，在调用cancel并传入参数*时触发  
22.             onDestroy:null,//在调用destroy方法时触发  
23.             onSelect:null,//选择文件后的回调函数，可传入参数file  
24.             onQueueComplete:null//队列中的所有文件上传完成后触发  
25.         }