mui 多文件上传至spring mvc 服务器
今天用了一天时间搞定了多文件上传。
首先是mui代码，主要就是img标签，我这里用的是id声明主要对应后端数据库的字段 通过src获取文件路径包括相册选择和手机拍照
<div class="mui-content-padded">
<h4>药店证件</h4>
<p>请上传以下证件,证件越齐全,越快通过审核</p>
</div>
<ul class="mui-table-view mui-grid-view" style="text-align: center;">
<li class="mui-table-view-cell mui-media mui-col-xs-5">
<a href="#">
<img class="mui-media-object" src="images/iconfont-tianjia.png" id="zj-photo1" style="height: 9rem; width: 9rem;">
<div class="mui-media-body" style="font-size: 10px;">营业执照<span style="color: red;">(必填)</span>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-5">
<a href="#">
<img class="mui-media-object" src="images/iconfont-tianjia.png" id="zj-photo2" style="height: 9rem; width: 9rem;">
<div class="mui-media-body" style="font-size: 10px;">药品经营许可证
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-5">
<a href="#">
<img class="mui-media-object" src="images/iconfont-tianjia.png" id="zj-photo3" style="height: 9rem; width: 9rem;">
<div class="mui-media-body" style="font-size: 10px;">食品经营许可证
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-5">
<a href="#">
<img class="mui-media-object" src="images/iconfont-tianjia.png" id="zj-photo4" style="height: 9rem; width: 9rem;">
<div class="mui-media-body" style="font-size: 10px;">医疗器械经营许可证
</div>
</a>
</li>
</ul>
<div class="mui-content-padded">
<p style="font-size: 0.7em;"><span style="color: red;">
注</span>:<<医疗机构职业许可证>>仅需在[营业执照]处上传</p>
</div>
<button class="mui-btn mui-btn-block mui-btn-block bg_color_eb6100 btn-apply" id="apply">提交审核</button>
</div>
然后是js代码
js端主要就是把图片通过http请求发送到web服务器 保存数据库等其他的任务交给web服务器完成
mui.init();
function plusReady() {
//Android返回键监听事件
plus.key.addEventListener('backbutton',function(){
myclose();
},false);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
$id('zj-photo1').addEventListener('tap',function(){
showActionSheet($id('zj-photo1'));
});
$id('zj-photo2').addEventListener('tap',function(){
showActionSheet($id('zj-photo2'));
});
$id('zj-photo3').addEventListener('tap',function(){
showActionSheet($id('zj-photo3'));
});
$id('zj-photo4').addEventListener('tap',function(){
showActionSheet($id('zj-photo4'));
});
//取得旧的图片路径
var oldPhoto=$id('zj-photo1').src;
var files=[];
$id('apply').addEventListener('tap',function(){
//初始化文件名数组，点击之后清除之前保存的文件名
files=[];
var ph1src=$id('zj-photo1').src;
var ph2src=$id('zj-photo2').src;
var ph3src=$id('zj-photo3').src;
var ph4src=$id('zj-photo4').src;
//判断下是否有新图片被添加
if(ph1src!=oldPhoto){
upload_img(ph1src);
};
if(ph2src!=oldPhoto){
upload_img(ph2src);
};
if(ph3src!=oldPhoto){
upload_img(ph3src);
};
if(ph4src!=oldPhoto){
upload_img(ph4src);
};
//开始上传
start_upload();
//获取图片地址进行上传
//打开页面
//写入缓存
});
//清除照片函数
$id('eliminate').addEventListener('tap',function(){
var ph1src=$id('zj-photo1').src=oldPhoto;
var ph2src=$id('zj-photo2').src=oldPhoto;
var ph3src=$id('zj-photo3').src=oldPhoto;
var ph4src=$id('zj-photo4').src=oldPhoto;
})
//弹出系统选择框 选择拍照或者相册
function showActionSheet(conf){
var divid = conf.id;
var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
if(e.index==1){
getImage(divid);
}else if(e.index==2){
galleryImg(divid);
}
} );
}
//相机选取照片
function getImage(divid) {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
//alert(p);//_doc/camera/1467602809090.jpg
plus.io.resolveLocalFileSystemURL(p, function(entry) {
//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg
//alert(entry.name);//1467602809090.jpg
compressImage(entry.toLocalURL(),entry.name,divid);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
}
//相册选取照片
function galleryImg(divid) {
plus.gallery.pick( function(p){
//alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
plus.io.resolveLocalFileSystemURL(p, function(entry) {
//alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
//alert(entry.name);//IMG_20160704_112620.jpg
//图片压缩函数
compressImage(entry.toLocalURL(),entry.name,divid);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}, function ( e ) {
}, {
filename: "_doc/camera/",
filter:"image"
} );
}
//图片压缩函数
function compressImage(url,filename,divid){
var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
plus.zip.compressImage({
src:url,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件
},
function(event) {
//uploadf(event.target,divid);
var path = name;//压缩转换目标图片的路径
//event.target获取压缩转换后的图片url路
//filename图片名称
saveimage(event.target,divid,filename,path);
},function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});
}
//图片保存到本地函数
function saveimage(url,divid,name,path){
//alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg
//alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg
var state=0;
var wt = plus.nativeUI.showWaiting();
// plus.storage.clear();
name=name.substring(0,name.indexOf("."));//图片名称：1467602809090
var id = document.getElementById("ckjl.id").value;
var itemname=id+"img-"+divid;//429img-F_ZDDZ
var itemvalue=plus.storage.getItem(itemname);
if(itemvalue==null){
itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}
}else{
itemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setItem(itemname, itemvalue);
// var src = 'src="'+url+'"';
var src =url;
// alert("itemvalue="+itemvalue);
showImgDetail(name,divid,id,src);
wt.close();
}
//将图片在本地显示出来
function showImgDetail (imgId,imgkey,id,src) {
document.getElementById(imgkey).src=src;
}
//初始上传地址
var server="http://192.168.2.202:8080/drug_source/uploadImage.action";
var index=1;
//上传图片文件放入数组
function upload_img(p){
//主要是因为MUI 5+ 不支持文件上传的Key是同一个名字
var n=p.substr(p.lastIndexOf('/')+1);
files.push({name:"uploadkey_" + index,path:p});
index++;
}
//开始上传
function start_upload(){
//判断下是否有照片在数组中
if(files.length<=0){
plus.nativeUI.alert("没有添加上传文件！");
return;
}
//原生的转圈等待框
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){ //上传完成
alert(status);
if(status==200){
//关闭转圈等待框
wt.close();
}else{
console.log("上传失败："+status);
//关闭原生的转圈等待框
wt.close();
}
});
//addData 添加上传数据
// task.addData("client","");
// task.addData("uid",getUid());
for(var i=0;i<files.length;i++){
var f=files[i];
//addFile 添加上传文件
task.addFile(f.path,{key:f.name});
}
//执行上传
task.start();
}
最后就是spring mvc 代码 我这里是放在了用户的Contorller 中
组件依赖的jar包
commons-fileupload-1.3.1.jar
commons-io-2.2.jar
spring mvc 中要配置multipartResolver 组件的实现类，用来处理上传文件图片等。
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<property name="maxUploadSize" value="5242880"></property>
</bean>
Contorller 接口中的代码
@RequestMapping("/uploadImage")
public @ResponseBody
String uploadImage(HttpServletRequest request) throws Exception {
// 复杂类型的request对象
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
// 获取文件名集合放入迭代器
Iterator<String> files = mRequest.getFileNames();
while (files.hasNext()) {
//获取上传文件的对象
MultipartFile mFile = mRequest.getFile(files.next());
if (mFile != null) {
String fileName = newFileName();
String oldfile = mFile.getOriginalFilename();
String sub = oldfile.substring(oldfile.indexOf('.'),
oldfile.length());
//创建一个新的文件名
String newFile = fileName + sub;
try {
//将上传的文件写入数组
byte[] bytes = mFile.getBytes();
// 获取服务器的绝对路径
String path = request.getSession().getServletContext()
.getRealPath("/");
//创建流对象
OutputStream out = new FileOutputStream(new File(path
+ "/upload/" + newFile));
//将数组写入到服务器
out.write(bytes);
out.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
return null;
}
// 生成新文件名
public static String newFileName() {
//时间戳+随机的三位数
String str = String.valueOf(System.currentTimeMillis())
+ String.valueOf((int) ((Math.random() * 9 + 1) * 100000));
return str;
}
