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" οnclick="back(true);"></div>
<div class="nvtt">Uploader</div>
<div class="nvbt idoc" οnclick="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" οnclick="appendByCamera()">拍照</div></td>
<td style="width:40%"><div class="button button-select" οnclick="appendByGallery()">相册选取</div></td>
</tr>
</tbody>
</table>
<br/>
<div class="button" οnclick="upload()">上 传</div>
<br/>
<!--<ul class="dlist">
<li class="ditem" οnclick="appendByCamera()">拍照添加文件</li>
<li class="ditem" οnclick="appendByGallery()">相册添加文件</li>
</ul>-->
</div>
<div id="output">
Uploader用于管理文件的上传,用于从本地上传各种文件到网络服务器,支持跨域访问操作。
</div>
</body>
</html>