SpringMVC+Huploadify 实现文件上传下载

实现上传下载的技术有很多，我目前做的这个项目视图层用的SpringMVC框架，需要结合该框架实现上传下载。

问了下公司前辈，前端框架推荐我使用Huploadify。

不多说，上代码。

js代码，函数调用：

①首先要下载引用js，这个不赘述。

②函数引用

 1 function uploadInit(domName,domPic){  
 2         $("#"+domName).Huploadify({  
 3             auto:true,  
 4             fileTypeExts:'*.*',  //前缀、后缀拦截（多个,隔开）
 5             multi:false,  //是否上传多个
 6             fileObjName:'fileid',  //参数名称（***重点***）
 7             fileSizeLimit:99999999999,  //文件大小限制（单位kb）
 8             showUploadedPercent:true,  //是否显示上传进度条
 9             buttonText:'上传图片',  //上传按钮显示文字
10             uploader:"${ctx}/advance/account/upload",  //控制器路径
11             onUploadSuccess:function(file,data){  
12                 alert("上传成功");
13                 var Data=JSON.parse(data);  
14                 if(Data.success==true){  
15                      $("#"+domPic).attr("src",Data.result);  
16                     param.uploadsuccess(Data.result);  
17                 }else{  
18                      jQuery.longhz.alert(Data.resultDes);  
19                 }  
20             },  
21             onUploadError:function(file,response){  
22                 jQuery.longhz.alert("上传失败!");  
23             }  
24         });  
25           
26 }  
27 
28 
29 //调用公共方法  
30 uploadInit("fileid","imgid");

③HTML

1 <div class="col-sm-4 controls">
2     <img src="" alt="" class="" id="imgid"/>预览图片   
3 <div id="fileid" name="fileid"></div><!--图片上传按钮--> 
4 </div> 

好了，完事了。。。

就是这么简单，补充两点：

1.Huploadify包中有个jquery.Huploadify.js文件，其中包含齐全的默认配置，可以再里面更改属性。

2.注意fileObjName:'fileid'这个参数，这个参数表示传递给控制器的参数名称，这个值必须在页面配置——jquery.Huploadify.js文件——控制器接受参数三者一致，否则会出现接收不到请求或参数错误的情况。

 

控制器代码：

 1 //上传图片
 2     @RequestMapping(value = "upload")
 3     public void upload(@RequestParam(value="fileid") MultipartFile file) {
 4         if(file == null) return;
 5         String fileName = file.getOriginalFilename();
 6         File saveFile = new File(Global.getConfig("uploadPath")+fileName);
 7         UploadUtils.copy(file, saveFile);
 8         
 9     }
10 
11 //以流的形式存储到本地即可
12 public class UploadUtils {
13     public static void copy(MultipartFile file, File saveFile){
14         OutputStream os = null;
15         InputStream is = null;
16         int i = 0;
17         byte[] buff = new byte[1024];
18         try {
19             os = new FileOutputStream(saveFile);
20             is = file.getInputStream();
21             while((i = is.read(buff)) != -1)
22                 os.write(buff, 0, i);
23             os.flush();
24         } catch (FileNotFoundException e) {
25             // TODO Auto-generated catch block
26             e.printStackTrace();
27         } catch (IOException e) {
28             // TODO Auto-generated catch block
29             e.printStackTrace();
30         }finally{
31             try {
32                 is.close();
33                 os.close();
34             } catch (IOException e) {
35                 // TODO Auto-generated catch block
36                 e.printStackTrace();
37             }
38         }
39     }
40 }

 

配置文件：

1 <!-- 上传文件拦截，设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes -->  
2     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
3         <property name="maxUploadSize" value="${web.maxUploadSize}" />  
4     </bean>

 

 

转载于:https://www.cnblogs.com/cxy2016/p/9106441.html