1500字范文 > 多张图片上传插件

多张图片上传插件

时间：2021-12-10 03:33:30

相关推荐

多张图片上传插件

多张图片上传

最近开发一个项目之前一直没有接触过这块的内容，百度谷歌的很多比较适合项目的选了一种大致效果如下图所示：

类似与微信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="/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() {//kanoidvar 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;}