MUI + Spring MVC 实现多图片上传
后台代码，主要是SpringMVC 接收多文件上传，不是用的MutilFiles 方式，主要是因为MUI 5+ 不支持文件上传的Key是同一个名字
private String saveFile(MultipartFile file, HttpServletRequest request){
String path= "";
try {
byte[] bytes = file.getBytes();
// 当前app根目录
String rootPath = request.getServletContext().getRealPath("/");
// 需要上传的相对地址（application.properties中获取）
String relativePath = env.getProperty("image.file.upload.dir");
// 文件夹是否存在，不存在就创建
File dir = new File(rootPath + File.separator + relativePath);
if (!dir.exists())
dir.mkdirs();
String fileExtension = getFileExtension(file);
// 生成UUID样式的文件名
String filename = java.util.UUID.randomUUID().toString() + "." + fileExtension;
// 文件全名
String fullFilename = dir.getAbsolutePath() + File.separator + filename;
// 用户头像被访问路径
String relativeFile = relativePath + filename;
// 保存图片
File serverFile = new File(fullFilename);
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
stream.write(bytes);
stream.close();
LOGGER.info("Server File Location = " + serverFile.getAbsolutePath());
String serverPath = new URL(request.getScheme(), request.getServerName(), request.getServerPort(),
request.getContextPath()).toString();
return relativeFile;
} catch (Exception e) {
LOGGER.info("error: {}", e);
}
return path;
}
@Override
public Object uploadImage( HttpServletRequest request) {
CommonsMultipartResolver cmr = new CommonsMultipartResolver(
request.getServletContext());
if (cmr.isMultipart(request)) {
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) (request);
Iterator<String> files = mRequest.getFileNames();
String imgPath = "";
while (files.hasNext()) {
MultipartFile mFile = mRequest.getFile(files.next());
if (mFile != null) {
String fileName = UUID.randomUUID() + mFile.getOriginalFilename();
String path = saveFile(mFile,request);
imgPath += path +";";
}
}
}
return null;
}
前台代码
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/feedback-page.css"/> <style> .dynamic_images {
width: 100%;
} .dynamic_images ul {
margin: 0;
padding: 10px;
} .dynamic_images ul li {
float: left;
list-style: none;
width: 75px;
} .dynamic_images ul li img {
width: 98%;
height: 75px;
} .mui-input-group .mui-input-row {
height: 40px;
}
.mui-input-row {
position: relative;
} mui.min.css:5
.mui-input-row {
clear: left;
overflow: hidden;
}
h5 {
margin: 5px 7px;
} .mui-page-content { width: 100%;
height: 100%;
background-color: #efeff4;
}
.feedback p {
padding: 10px 15px 0;
font-size: 16px;
margin-top: 0;
margin-bottom: 10px;
color: #000;
}
.feedback textarea {
height: 160px;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
</style>
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">新装设备</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<form class="mui-input-group"> <div class="mui-input-row">
<label>车牌号</label>
<input type="text" class="mui-input-clear" id="platenum" data-input-clear="15" disabled="true" value="京NBU035">
</div> <div class="mui-input-row">
<label>设备编号</label>
<input type="text" class="mui-input-clear" id="imei" data-input-clear="15" placeholder="请输入设备的IMEI">
</div> <div class="feedback">
<input type="hidden" id="image-path" value="">
<p>安装图片</p>
<div class="dynamic_images">
<ul>
<li><img src="data:images/iconfont-tianjia.png" id="addnew"></li>
</ul>
</div>
</div> <div class="mui-button-row" style="clear: both;">
<button id="saveBtn" type="button" class="mui-btn mui-btn-primary">确认</button>
<button type="button" class="mui-btn mui-btn-danger">取消</button>
</div>
</form>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src='js/feedback.js'></script>
<script src='js/jquery-1.12.4.min.js'></script>
<script src="js/app.js"></script>
<script>
var files = [];
(function($, doc) {
mui.init({
swipeBack: true //启用右滑关闭功能
}); document.addEventListener("plusready", plusReady, false); function plusReady() {
var wv = plus.webview.currentWebview();
document.getElementById("addnew").addEventListener("tap", function() {
showActionSheet();//拍照还是相册
});
document.getElementById("platenum").value = wv.platenum; plus.nativeUI.closeWaiting(); }
}(mui, document)); document.getElementById("saveBtn").addEventListener('tap', function() {
upload();
}); // 上传文件
function upload() { var platenum = document.getElementById('platenum').value;
var imei = document.getElementById('imei').value;
var task = plus.uploader.createUpload('http://192.168.8.101:8989/api/v1/vehicle/uploadImage', {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
var result =jQuery.parseJSON(t.responseText);
mui.toast(result.message); } else {
console.log("上传失败：" + status);
}
}
); for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.path, {
key:f.name
}); }
task.addData('platenum',platenum);
task.addData('imei',imei);
task.start(); } // 添加文件
var index = 1;
var newUrlAfterCompress;
function appendFile(p) {
files.push({
path: p,
name: "uploadkey_" + index
});
index++;
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
} function galleryImgs() { // 从相册中选择图片
plus.gallery.pick(function(e) {
//$(".dynamic_images ul li").remove(".pickimg");
console.log("选择了"+e.files.length+"个图片");
for (var i = 0; i < e.files.length; i++) {
if (i < 9) {
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");
var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
newUrlAfterCompress=compressImage(e.files[i],dstname);
appendFile(dstname);
}
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true
});
} //压缩图片，这个比较变态的方法，无法return
function compressImage(src,dstname) {
//var dstname="_downloads/"+getUid()+".jpg";
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite:true,
quality: 20
},
function(event) {
//console.log("Compress success:"+event.target);
return event.target;
},
function(error) {
console.log(error);
return src;
//alert("Compress error!");
}); } function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
}
);
}
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //
//$(".dynamic_images ul li").remove(".pickimg");
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");
var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
newUrlAfterCompress=compressImage(localurl,dstname);
appendFile(dstname);
});
});
}
</script>
</body>
</html>
MUI + Spring MVC 实现多图片上传的更多相关文章
- Spring MVC MultipartFile实现图片上传
<!--Spring MVC xml 中配置 --><!-- defaultEncoding 默认编码;maxUploadSize 限制大小--><!-- 配置Multi ...
- Spring MVC 实现文件的上传和下载
前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:“用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流”.我回复他说:“使用Spring MVC框架可以做到这一点,因为Spri ...
- 关于我使用spring mvc框架做文件上传时遇到的问题
非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...
- SpringMVC+Spring+MyBatis 整合与图片上传简单示例
一.思路: (一) Dao层: 1. SqlMapConfig.xml,空文件即可.需要文件头.2. applicationContext_dao.xml. a) 数据库连接池b) SqlSessio ...
- .NET MVC实现多图片上传并附带参数（ajaxfileupload）
做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...
- .net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- .net mvc + layui做图片上传（一）
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
- MVC微信浏览器图片上传（img转Base64）
因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片 ...
- spring mvc 简单的文件上传与下载
上传文件有很多种方法,这里主要讲解的是spring mvc内提供的文件上传 前提使用:spring mvc 在这个之前我们需要把环境给配置好 1:springmvc的XML配置文件加上这一段就即可, ...
随机推荐
- 【sqli-labs】Less7
Less-7: 输出文件 sql导出文件语句 select * from table_test into outfile 'test.txt' 既然名字是输出文件,那肯定是和文件有关系. 首先,确保s ...
- jquery checkbox勾选/取消勾选只能操作一次的诡异问题
第一次执行,没问题,但第二次执行就有问题了,选择不了 解决办法:把attr()换成prop() $("#CheckedAll").click(function () { if ($ ...
- AI-restful接口写法
AI-restful接口写法 restful接口规范 http协议请求方式:GET POST DELETE PUT PATCH OPTION HEAD 设计接口时必须使用这种格式的数据 GET 查看数 ...
- spring cloud 使用spring cloud bus自动刷新配置
Spring Cloud Bus提供了批量刷新配置的机制,它使用轻量级的消息代理(例如RabbitMQ.Kafka等)连接分布式系统的节点,这样就可以通过Spring Cloud Bus广播配置的变化 ...
- 学习REST
REST:Representational State Transfer,资源的表现状态转换.可以理解为对资源的操作. 1. 资源 资源就是业务对象,如图片.文本.歌曲或者客户.交易等.这些是用户 ...
- Java+selenium之WebDriver的cookie,等待等高级操作(五)
1. 操作cookie // 增加一个 name = "name",value="value" 的 cookie Cookie cookie = new Coo ...
- 【C++ Primer | 10】泛型算法
#include<iostream> #include<algorithm> #include<vector> #include<string> #in ...
- javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
- UE4 ShooterGame Demo的开火的代码
之前一直没搞懂按下鼠标左键开火之后,代码的逻辑是怎么走的,今天看懂了之前没看懂的部分,进了一步 ShooterCharacter.cpp void AShooterCharacter::OnStart ...
- checkbox选中相关问题总结
html: <input type="checkbox" name="fruit" id="apple">苹果 <inpu ...