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配置文件加上这一段就即可, ...
随机推荐
- thymleaf模板截取日期的年月日，去掉时分秒
简单描述:浏览同事提交的代码,发现他的日期回显中有一行代码,只截取到了年月日,记录一下 代码: //HTML代码 <span th:text="${#strings.substring ...
- 【linux】Linux误删C基本运行库libc.so.6急救方法
转自:http://www.cnblogs.com/fjping0606/p/4551475.html 下面全文都是拷贝的上面链接的内容. 首先普及一下关于libc.so.6的基本常识: libc.s ...
- Python基础之封装
一.什么是封装 在程序设计中,封装(Encapsulation)是对具体对象的一种抽象,即将某些部分隐藏起来,在程序外部看不到,其 含义是其他程序无法调用. 要了解封装,离不开“私有化”,就是将类或者 ...
- java Properties (属性集)
加载Properties Properties downloadLog = new Properties(); try { //加载logFile文件 downloadLog.load(new Fil ...
- cf581F 依赖背包+临时数组 好题
这题得加个临时数组才能做.. /* 给定一棵树,树节点可以染黑白,要求叶子节点黑白平分 称连接黑白点的边为杂边,求使得杂边最少的染色方 那么设dp[i][j][0|1]表示i子树中有j个叶子节点,i染 ...
- 20165206 2017-2018-2 《Java程序设计》第二周学习总结
20165205 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 java语言共有8种基本数据类型,分别是boolean.byte.short.char.in ...
- 使用Docker方式运行Mysql(MariaDB)
两者差不多.我使用的是MariaDB. 下面的docker命令,挂了数据,配置,映射了端口,指定了root密码,服务端编码. 蛮快的! docker run \ --name mariadb \ -v ...
- python全栈开发day92-day96 Vue总结
-- ES6常用语法 -- var let const -- 模板字符串 -- 反引号 -- ${} -- 箭头函数 -- 普通函数取决于函数最近的调用者 -- 箭头函数取决当前环境 -- 类 -- ...
- 批处理命令调用WINRAR对文件进行压缩
命令: winrar a 参数 压缩后的文件 压缩源文件 如压缩apk文件,代码如下 echo apk文件不能直接下载,所以压缩apk成rar来下载 d: cd D:\Program Files\W ...
- mariadb-半同步复制
半同步复制: 使用插件 对于从节点,有一部分为同步复制,当主节点复制完从节点后才向客户返回ok,同步超时后自动降级为异步 有一部分为异步复制 这样为了与主节点冗余 基于主从的模式上搭建 半同步复制: ...