layui 多图片上传

效果如下:

入口

      <div class="layui-form-item"><div class="layui-upload" style="width: 90%"><button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传图片</button><span style="color: red"> (可上传多张照片)</span><input type="button" id="btnHide9" style="display: none" class="none"><blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 130px;width: 620px"><ul id="demo9" class="layui-upload-list"></ul></blockquote><input type="hidden" name="imgUrl" id="imgUrl"></div></div>

其中 imgUrl 为上传字段（保存url的）

css 样式

#demo9 {margin: 0 auto;font-size: 0;}#demo9 li {display: inline-block;width: 150px;padding-top: 1%;}#demo9 li img {width: 100%;}.removeBtn {position: absolute;top: 2px;right: 35px;z-index: 11;border: 0px;border-radius: 50px;background: red;width: 22px;height: 22px;color: white;font-size: 25px;line-height: 25px;}

  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/showPhoto1/css/viewer.css"><script src="${pageContext.request.contextPath}/js/showPhoto1/js/viewer.js"></script>

   upload = layer.upload; //自己引入uploadvar uploadInst9 = upload.render({elem: '#upload',url: '${pageContext.request.contextPath}/file/v1/upload' //改成您自己的上传接口,multiple: true,auto: false,method:'post',field: 'file',size: 5120,accept: 'images' //只允许上传图片,acceptMime: 'image/*' //只筛选图片,bindAction: "#btnHide9",exts:'jpg|png|bmp|jpeg|.jpg|.png|.bmp|.jpeg',choose: function (obj) {hover=layer.load(2);$("#btnHide9").trigger("click");},before: function(obj){},allDone: function(obj){ //当文件全部被提交后，才触发layer.close(hover);}, done: function (res,index) {if(res.success == false){return layer.msg('上传失败');}var path = res.data;if (path==''){return layer.msg('上传失败');}var contents  = $("#imgUrl").val()$('#demo9').append('<li style="position: relative"><img src="'+ path +'" data-original="${pageContext.request.contextPath}/'+ path +'"  class="layui-upload-img"style="width: 100px;height: 80px;margin-right: 10px">' +'<button class="removeBtn"  onclick="removeImg(this,\''+path+'\',\''+9+'\',\''+'\')">×</button></li>')$("#imgUrl").val(contents + path +",");viewer9.update()layer.close(hover);}, error: function () {demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});

   function insert() {  //新增时清空$("#demo9").html("");}

    // 初始化Viewer组件var viewer9 = new Viewer(document.getElementById('demo9'), {inline: false,zIndex: 999999999999,});

    //分三步 获取数据,打开弹框,组装数据并且提交function update() {form.render(); //更新全部var checkStatus = layui.table.checkStatus('datagrid');var rows = checkStatus.dataif (rows.length == 0) {layer.msg("至少选择一项", {anim: 6, time: 2000});return;} else if (rows.length > 1) {layer.msg("至多选择一项", {anim: 6, time: 2000});return;}var selectedlId = rows[0].stationId;$.ajax({url : controller + "/getById",method: 'get',data :{ id: selectedlId},success : function (data) {list = JSON.parse(data);let json = JSON.parse(data)if (json.success) {$("#demo9").html("");let ckeObj = json.data.imgUrlif (ckeObj != '' || ckeObj != null) {ckeObj.split(",").forEach(path => {if (path != '') {$('#demo9').append('<li style="position: relative"><img src="' + path + '" data-original="' + path + '"  class="layui-upload-img"style="width: 100px;height: 80px;margin-right: 10px">' +'<button class="removeBtn"  onclick="removeImg(this,\'' + path + '\',\'' + selectedlId + '\',\'' + '\')">×</button></li>')}})}viewer9.update()form.val("formDemo", json.data);form.render();} else {}}});var upOpen =  layer.open({type:1,content:$("#pop"),title:"编辑信息配置", closeBtn: 0, shade: 0.6, area: ['860px', '780px'],shadeClose:true,success:function (layero,index) {}})form.on('submit(submitBtn)',function (data) {var fields="";for(var name  in data.field) {if (name !='file'){fields += name + ",";}}data.field['fields'] = fields;$.ajax({url : controller + "/update",method: 'post',data : data.field,success : function(data) {var json = JSON.parse(data);if (json.success) {layui.table.reload('datagrid')layer.msg('提交成功', {icon: 1,time: 3000});parent.layer.closeAll();layer.close(upOpen)location.reload();} else {layer.msg(json.msg, {icon: 0,time: 1000});layer.close(hover);}}})})}

   // 图片删除 删除oss并且更新数据function removeImg(obj,result,rowId){var  hover=layer.load(2);$.ajax({url:controller+"/delOSSAndUpdateFile",data:{fileUrl:result,id:rowId},dataType:'text',async:false,success:function(data){var json = JSON.parse(data);if(json.success){$(obj).parent().remove();var contents = $("#imgUrl").val()var contents1 = contents.split(',');contents = "";for (var j = 0; j < contents1.length; j++) {if (contents1[j] != "" && contents1[j] != result) {contents += contents1[j] + ","}}$("#imgUrl").val(contents)layer.close(hover);}else{layer.close(hover);layer.alert(json.msg, {icon: 2, title: '错误'});}},error: function () {layer.close(hover);layer.alert("删除出错!\r\n请查看日志!", {icon: 5, title: '异常'});}});}

后端删除代码

    @RequestMapping("/delOSSAndUpdateFile")@ResponseBodypublic Result delOSSAndUpdateFile(@RequestParam String fileUrl, @RequestParam String id) {User user = getUser();try {InfoDevice entity = infoDeviceService.getById(id);if (entity != null) {String imgUrls = entity.getImgUrl();if (imgUrls!= null && !"".equals(imgUrls)) {String[] split = imgUrls.split(",");
//                    List<String> fillList = Arrays.asList(split); Arrays中静态内部类ArrayList重写方法中没有removeList<String> fillList = new ArrayList<>(Arrays.asList(split));if (fillList.contains(fileUrl)) {//去除 并且更新数据库fillList.removeIf(e -> fileUrl.equals(e));entity.setImgUrl(String.join(",",fillList)+",");entity.setModifiedAt(new Date());entity.setModifiedId(user.getId());entity.setModifiedBy(user.getLoginName());String fields = "自己的框架更新操作, 笔者这里是拼接更新字段";infoDeviceService.update(entity, fields);}}}fileAppService.deleteFile(fileUrl);return Result.ok();} catch (Exception e) {return Result.error("删除失败,错误信息:" + e.getMessage());}}

layui 多图片上传相关推荐

ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
php 多图上传编辑器,ThinkPHP5整合LayUI编辑器图片上传
一.创建上传方法 public function uploadimg() { $image = $_FILES['file']; $filebase = file_get_contents($imag ...
.net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
.Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
layui之图片上传
前言:个人转码小说网站:友书-绿色.纯净.无广告,欢迎广大小说阅读爱好者同行来本网站看小说,书友交流群:580462139(群主及管理均为资深90后程序猿哦) 前言: layui是一套非常棒的前端框架 ...
layui：图片上传
Layui文件上传 layui官网:https://www.layui.com/ layui插件下载官方文档(关于文件上传) 快速入门前端 1. index页面,引入css样式和js脚本 < ...
ASP.NET MVC +Layui 实现图片上传功能
ASP.NET MVC +Layui 实现图片上传功能这是一个前端的添加功能只展示图片添加的前端代码 <div class="layui-upload"> < ...
layui 实现图片上传和预览
[学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面前台实现 <#--图片名--> <input id="fileName" type=&q ...

layui 多图片上传

效果如下:

入口

css 样式

layui 多图片上传相关推荐

最新文章

热门文章