1:首先设置文件上传的配置信息
package com.yw.appi; import com.yw.appi.interceptor.APPInterceptor; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; import org.springframework.boot.context.embedded.MultipartConfigFactory; import javax.servlet.MultipartConfigElement; /** * Created by xiaoji on 2015/3/17. */ @Configuration @ComponentScan @EnableAutoConfiguration public class Application extends WebMvcConfigurerAdapter { public static void main(String[] args) { SpringApplication.run(Application.class, args); } /** * 配置拦截器 * @param registry */ public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new APPInterceptor()).addPathPatterns("/userControl/**","/orderControl/**","/payControl/**","/consigneeControl/**"); } @Bean public MultipartConfigElement multipartConfigElement() { MultipartConfigFactory factory = new MultipartConfigFactory(); factory.setMaxFileSize("12800KB"); factory.setMaxRequestSize("12800KB"); return factory.createMultipartConfig(); } }
2:创建上传后台controller
package com.yw.appi.controller; import com.yw.appi.util.SYS; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; 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.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; /** * Created by xiaoji on 2015/9/24. * 图片上传DEMO */ @Controller @RequestMapping(value="/fileUploaderControl") public class FileUploaderController { /** * 上传DEMO */ @RequestMapping(value="/upload", method = {RequestMethod.POST}) public void images(ModelMap modelMap,HttpServletRequest request, @RequestParam("file") MultipartFile file){ String path = "D:\\upload\\"+file.getOriginalFilename(); File targetFile = new File(path); try { file.transferTo(targetFile); } catch (IOException e) { e.printStackTrace(); } modelMap.addAllAttributes(SYS.SUCCESS.Msg); } }
3:创建一个h5+demo,更改服务器地址为http://192.168.1.35:8080/fileUploaderControl/upload,ip自己设置
,更改文件的key为后台对应的参数file,这里我只测试了单个文件上传,多个自由发挥,文档说的多个key不能相同,这个没测试过,有需要的自己测试。
代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <title>Hello H5+</title> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript"> //var server="http://demo.dcloud.net.cn/helloh5/uploader/upload.php"; var server="http://192.168.1.35:8080/fileUploaderControl/upload"; var files=[]; // 上传文件 function upload(){ if(files.length<=0){ plus.nativeUI.alert("没有添加上传文件!"); return; } outSet("开始上传:") var wt=plus.nativeUI.showWaiting(); var task=plus.uploader.createUpload(server, {method:"POST"}, function(t,status){ //上传完成 if(status==200){ outLine("上传成功:"+t.responseText); plus.storage.setItem("uploader",t.responseText); var w=plus.webview.create("uploader_ret.html","uploader_ret.html",{scrollIndicator:'none',scalable:false}); w.addEventListener("loaded",function(){ wt.close(); w.show("slide-in-right",300); },false); }else{ outLine("上传失败:"+status); wt.close(); } } ); task.addData("client","HelloH5+"); task.addData("uid",getUid()); for(var i=0;i<files.length;i++){ var f=files[i]; task.addFile(f.path,{key:"file"}); } task.start(); } // 拍照添加文件 function appendByCamera(){ plus.camera.getCamera().captureImage(function(p){ appendFile(p); }); } // 从相册添加文件 function appendByGallery(){ plus.gallery.pick(function(p){ appendFile(p); }); } // 添加文件 var index=1; function appendFile(p){ var fe=document.getElementById("files"); var li=document.createElement("li"); var n=p.substr(p.lastIndexOf('/')+1); li.innerText=n; fe.appendChild(li); files.push({name:"uploadkey"+index,path:p}); index++; empty.style.display="none"; } // 产生一个随机数 function getUid(){ return Math.floor(Math.random()*100000000+10000000).toString(); } </script> <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/> </head> <body> <header> <div class="nvbt iback" onclick="back(true);"></div> <div class="nvtt">Uploader</div> <div class="nvbt idoc" onclick="openDoc('Uploader Document','/doc/uploader.html')"></div> </header> <div id="dcontent" class="dcontent"> <br/> <p class="heading">上传文件列表:</p> <ul id="files" style="text-align:left;"> <p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p> </ul> <table style="width:100%;"> <tbody> <tr> <td style="width:40%"><div class="button button-select" onclick="appendByCamera()">拍照</div></td> <td style="width:40%"><div class="button button-select" onclick="appendByGallery()">相册选取</div></td> </tr> </tbody> </table> <br/> <div class="button" onclick="upload()">上 传</div> <br/> <!--<ul class="dlist"> <li class="ditem" onclick="appendByCamera()">拍照添加文件</li> <li class="ditem" onclick="appendByGallery()">相册添加文件</li> </ul>--> </div> <div id="output"> Uploader用于管理文件的上传,用于从本地上传各种文件到网络服务器,支持跨域访问操作。 </div> </body> </html>