由于业务需要,需要做一个批量上传图片的功能,因此本人采用的是图片上传插件来完成的,可以采用的有两种插件实现方式,那么现在来说下实现方式一:
1、这种方式采用的是ssi-uploader图片上传插件,bootstarp.min.css不是必须的,我这里只是添加显示添加按钮的样式。
前台页面写法配置:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/bootstarp/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=basePath%>/static/assets/js/ssi-uploader/styles/ssi-uploader.css"/>
<script src="<%=basePath%>/static/assets/js/ssi-uploader/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="<%=basePath%>/static/assets/js/ssi-uploader/js/ssi-uploader.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal form-bordered" role="form" id="uploadImage">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">审批截图上传</h2>
</header>
<div class="panel-body">
<!--图片上传-->
<div class="row">
<div class="col-md-12">
<h3>审批截图上传:</h3>
<input type="file" multiple id="ssi-upload" data-validate="required:" />
</div>
</div>
</div>
<footer class="panel-footer">
<input type="button" class="btn btn-primary" onclick="location.href='<%=basePath%>/login/main'" value="退出"/>
<%--<input type="button" class="btn btn-primary" id="submitBtn" value="上传"/>--%>
</footer>
</section>
</form>
</div>
</div>
<script type="text/javascript">
$(function(){
//初始化插件
$('#ssi-upload').ssi_uploader({
url: '<%=basePath%>/testFileUpload',
dropZone:false,//禁止拖拽
maxNumberOfFiles:9,//最多上传文件
maxFileSize:5,//文件最大为5M
allowed:['jpg','gif','txt','png','pdf'],//允许上传的文件格式
locale:"zh_CN",//使用中文
preview:true,//启用预览效果
onUpload:function(data){
//if(data == "true"){
alert("上传成功!");
/*window.location.href="<%=basePath%>/login/main";*/
//}
}
});
})
</script>
</body>
</html>
后台处理图片上传操作:
@RequestMapping(value = "testFileUpload",method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名
File dir = new File(upaloadUrl);
if(!dir.exists())//目录不存在则创建
dir.mkdirs();
for(MultipartFile file :files.values()){
String fileName=file.getOriginalFilename();//相片的名字
File tagetFile = new File(upaloadUrl+fileName);//创建文件对象
if(!tagetFile.exists()){//文件名不存在 则新建文件,并将文件复制到新建文件中
try {
tagetFile.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
try {
file.transferTo(tagetFile);//到这里就可以上传了,以下是处理图片及允许gif的上传
//图片扩展名
String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
//以1024*768大小改变图片,如果是gif则放开限制,如果需要存储原图则不需要处理
if(!types.contains("gif")){
// Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);
}
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "true";
}
上传插件样式:
添加文件样式:
上传成功样式:
注:上传后的清空只是前台清空,并没有给出后台清空的方法,因此如果要实现后台清空需要自己扩展插件。
第二种上传图片插件使用(webuploader.js图片上传插件):
首先引用图片插件需要的相关文件:
扫描二维码关注公众号,回复:
3551015 查看本文章
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="<%=basePath%>/static/assets/js/ssi-uploader/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/js/webupload/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/js/webupload/css/style.css" />
<script type="text/javascript" src="<%=basePath%>/static/assets/js/webupload/js/webuploader.js"></script>
<script type="text/javascript" src="<%=basePath%>/static/assets/js/webupload/js/upload.js"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<!--头部,相册选择和格式选择-->
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里,单次最多可选300张</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
此插件的访问后台的操作,独立为了一个js文件,文件位置如下:
server对应的值,为上传图片的链接
上传图片后台处理:
@RequestMapping(value = "testFileUpload",method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名
File dir = new File(upaloadUrl);
if(!dir.exists())//目录不存在则创建
dir.mkdirs();
for(MultipartFile file :files.values()){
String fileName=file.getOriginalFilename();//相片的名字
File tagetFile = new File(upaloadUrl+fileName);//创建文件对象
if(!tagetFile.exists()){//文件名不存在 则新建文件,并将文件复制到新建文件中
try {
tagetFile.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
try {
file.transferTo(tagetFile);//到这里就可以上传了,以下是处理图片及允许gif的上传
//图片扩展名
String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
//以1024*768大小改变图片,如果是gif则放开限制,如果需要存储原图则不需要处理
if(!types.contains("gif")){
// Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);
}
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "true";
}
效果图:
上传前:(可以删除,可以旋转图片)
上传后:(不能删除图片)
至此,两个图片上传插件的简单应用完成,不足之处望指教。