多张图片上传
最近开发一个项目之前一直没有接触过这块的内容,百度谷歌的很多比较适合项目的选了一种大致效果如下图所示:
类似与微信qq说说的上传图片
前端代码
1.上传页面 add.ftl
<#include "/views/commons/pageContentPre.ftl"/>
<form id="medicalUnionForm" action="/medicalunion/upload" method="POST" class="form-horizontal" role="form"
enctype="multipart/form-data">
<section class=" img-section">
<p class="up-p">作品图片:<span class="up-span">最多可以上传5张图片</span></p>
<div class="z_photo upimg-div clear" >
<section class="z_file fl">
<img src="/statics/image/add.png" class="add-img">
<input type="file" name="file" id="file" multiple="multiple" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" />
</section>
</div>
</section>
<aside class="mask works-mask">
<div class="mask-content">
<p class="del-p">您确定要删除当前图片吗?</p>
<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
</div>
</aside>
<input type="submit" value="提交">
</form>
<#include "/views/commons/pageContentPost.ftl"/>
<script type="text/javascript">
// 注意:此处因为是我们公司自己的框架,不便粘贴太多代码,此处load的作用 相当于下面的<link>和<script> 引入相关js 和css样式
load(["commoncss","uploadcss","jqmin", "uploadjs"], function () {
});
</script>
等同于上述load 功能
<link href="css/common.css" type="text/css" rel="stylesheet"/>
<link href="css/index.css" type="text/css" rel="stylesheet"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/imgUp.js"></script>
2.修改页面,获取图片。
修改页面比添加的稍微复杂点,需要动态获取之前已上传的图片,另外还要可以动态添加和删除在dosubmit()方法中通过获取img标签的class属性来获取 src值,然后处理后复制给隐藏 的input,代表之前上传图片的变化情况,而新上传的则正常在后台重新上传处理。
<form id="medicalUnionForm" action="/medicalunion/edit" method="POST" class="form-horizontal" role="form"
enctype="multipart/form-data">
<div class="row">
<div class="form-group">
<div class="col-md-8">
<label class="col-sm-4 control-label">认证资料</label>
<div class="col-sm-8">
<section class=" img-section">
<p class="up-p">认证资料图片:<span class="up-span">最多可以上传5张图片</span></p>
<div id="imagesId" class="z_photo upimg-div clear" >
<section class="z_file fl">
<img src="/statics/image/add.png" class="add-img">
<input type="file" name="file" style="width: 100px;height: 100px" id="file" multiple="multiple" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" />
</section>
</div>
</section>
<aside class="mask works-mask">
<div class="mask-content">
<p class="del-p">您确定要删除当前图片吗?</p>
<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
</div>
</aside>
</div>
</div>
</div>
</div>
<#--认证URL-->
<input class="form-control" id="identificationUrlId" type="hidden" name="identificationUrl" value="${medicalUnionVO.identificationUrl}">
<div class="form-group">
<div class="col-md-8">
<label class="col-sm-4 control-label"></label>
<div class="col-sm-3">
<input id="validateBtn" type="button" onclick="dosubmit();" class="btn blue" value="保存"/>
</div>
</div>
</div>
</form>
<script type="text/javascript">
load(["commoncss","uploadcss","jqmin", "uploadjs"], function () {
});
$GF.push(function () {
$(document).ready(function () {
flush();
});
});
function flush() {
var html = '';
var iamgesrcs = $("#identificationUrlId").val();
var srcs = iamgesrcs.split(';');
for (var i = 0; i < srcs.length - 1; i++) {
html+='<section class="up-section fl">'
html+='<span class="up-span"></span>'
html+= '<img class="close-upimg" src="/statics/image/del.png">'
html+= '<img class="up-img" src="公司服务url'+ srcs[i] +'">'
html+= '<p class="img-name-p">33.jpg</p><input id="taglocation" name="taglocation" value="" type="hidden">'
html+= '<input id="tags" name="tags" value="" type="hidden">'
html+= '</section>'
}
$("#imagesId").prepend(html);
}
function dosubmit() {
//kanoid
var identifiUrls ='' ;
$("img").each(function() {
if($(this).attr("class") == "up-img") {
var url = $(this).attr("src");
var indexNum = url.indexOf("公司服务url");
if (indexNum != -1){
var v1 = url.replace("公司服务url","");
var v2 = v1.split("?")[0];
identifiUrls += v2 + ";";
}
}
});
$("#identificationUrlId").val(identifiUrls);
$("#medicalUnionForm").submit();
}
</script>
后台springmvc代码处理图片上传
这里说明下:我这里没有具体存储图片入库的过程,只是提供一个图片输入流调用kanoFileService接口上传图片,具体怎么处理的不作说明,接口会返回一个ID指代某个图片。要强调的是**@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles** ,此处**value="file"** fiel指代的是前端代码中**input** 的**name="file"**,**required = false** 代表不是必须的,我的业务中可以不上传图片所以设置了此项。**file.getOriginalFilename()**可以获取图片的名称。
@RequestMapping(value = "add", method = RequestMethod.POST)
public String add(MedicalUnionVO medicalUnionVO,
@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles) throws IOException {
List<String> kanoIdList = new ArrayList<>();
if (multipartFiles != null) {
for (MultipartFile file : multipartFiles) {
if (file != null && StringUtils.isNotBlank(file.getOriginalFilename())) {
try {
Response<UploadResult> uploadResultResponse = kanoFileService .uploadFile(file.getOriginalFilename(), KANO_BIZ_CODE, file.getInputStream());
if (uploadResultResponse.isSuccess()) { kanoIdList.add(uploadResultResponse.getData().getKanoFileId());
} else {
LOGGER.warn("上传图片失败:上传文件:{},返回:{}", file.getOriginalFilename());
}
} catch (IOException e) {
LOGGER.error("上传图片异常:上传文件:{},返回:{}", file.getOriginalFilename(), e);
}
}
}
}
return kanoIdList;
}
注意点:
1.前端
form表单的 :enctype="multipart/form-data" 属性不要忘了
<input type="file" multiple="multiple" />
2.后端 springMVC
@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles
插件下载地址: http://download.csdn.net/detail/java_huilong/9859115