我的情况是,通过layui上传图片调用后端,后端将图片上传后返回图片路径,上传成功后将图片在页面显示出来(避免用户网速不稳定,图片其实还没上传成功就进行下一步操作),然后同步每个图片增加隐藏域,最终表单提交时将上传的图片路径都传过去。

然后遇见了问题,现在需要允许同时选择多个图片上传

我之前都是一张一张上传的,所以上传成功后渲染到页面上的时候,利用的是 done 方法,然而:

导致选择两张图结果会渲染两次,三张则是三次。。。

然后我花了点功夫改进了一下:

        upload.render({
elem: '#upload',
url: "url",
number:0, //上传数量
multiple:true, //允许多文件上传
accept:'images', //设置文件类型 图片
acceptMime: 'image/*', //只显示图片文件
before: function (obj) { //上传前回调
new_obj = obj;
addstr = [];
},
done: function (res) { //请求成功回调
addstr.push(res.data.src);
},
allDone: function(obj){ //当文件全部被提交后,才触发
new_obj.preview(function (index, file, result) {
trueindex = index.split('-');  
$('.img_list').eq(0).append(
'<div style="display: inline-block"> ' +
'<img src="' + result + '" alt="' + file.name + '" layer-src="'+addstr[trueindex[1]]+'>' +
'<input type="hidden" class="imagelist" name="image" value="'+addstr[trueindex[1]]+'"> ' +
'</div>'
)
});
}
});

逻辑是在上传前回调拿到所选的图片对象,请求成功时再拿到该图片的返回路径,并将多图路径给一个数组,最终在所有文件上传完成时,根据多图对象遍历的索引,和上传成功返回的图片路径数组索引进行匹配,然后一次性渲染上去。

但是多图对象的索引并不是单纯的1,2,3,而是 时间戳-图片选择顺序 ,索引我将索引处理了一下,实现了所有上传图片的路径都能放入隐藏域里。

然后,我测试了一下,发现展示的图片顺序和对应隐藏域的图片路径并不是一个图。。就是顺序会错误,比如你上传的时候展示的是 图1 图2 图3 然后它们的隐藏域是 图3 图2 图1 ,并不会导致数据错误,如果你不在乎它们的顺序,那么还是可以用的。至于出现顺序错误的原因,我有空了会再看看,希望能够解决。

*注:

layui多图上传加隐藏域的更多相关文章

  1. layui多图上传实现删除功能

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...

  2. layui多图上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  4. ThinkPHP5+Layui实现图片上传加预览

    html代码 <div class="layui-upload"> <button type="button" class="lay ...

  5. ajax2.0之文件上传加跨域

    express_server.js const express=require('express'); //主体 const body=require('body-parser'); //接收普通PO ...

  6. .Net之Layui多图片上传

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

  7. layui中的多图上传

    效果展示: 1.html部分: 注:<input> 作为隐藏域,用于保存多图上传的资源数组,方便后期进行 form 表单的提交 <input type="hidden&qu ...

  8. 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  9. [PHP] layui实现多图上传,图片自由排序,自由删除

    实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...

随机推荐

  1. 【HDOJ6610】Game(序列带修莫队)

    题意:有n堆石子,第n堆有a[i]个,A先选择一个范围[L,R],B选择一个子区间[l,r],之后照nim游戏的规则进行 现在有询问与操作 每次询问B在给定的[L,R]内有多少种子区间的取法使得A必胜 ...

  2. zenoss(智能监控软件)

    Zenoss Core是开源企业级IT管理软件-是智能监控软件,他允许IT管理员依靠单一的WEB控制台来监控网络架构的状态和健康度,同时也是开源的网络与系统管理软件.全名          Zenos ...

  3. CF704E Iron Man

    CF704E Iron Man 经过不懈(抄题解)努力之后,终于AC了此题. 说起来很简单. 考虑一个链上的情况, 建立直角坐标系. 横坐标是t,纵坐标是距离链开头的距离d m个路径就是一个线段 那么 ...

  4. 聊聊 API 签名方式

    前言 现在越来越多的公司以 API 的形式对外提供服务,这些 API 接口大多暴露在公网上,所以安全性就变的很重要了.最直接的风险如下: 非法使用 API 服务.(收费接口非法调用) 恶意攻击和破坏. ...

  5. jmeter添加自定义扩展函数之if判断

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  6. Gradle Wrapper 介绍

    回顾 上一篇介绍了如何使用 Gradle 快速创建 Java 项目,开始讲 Gradle Wrapper 之前先来重温一下通过 gradle init 命令创建的 Java 项目目录结构 ├── bu ...

  7. C语言|博客作业3

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://i.cnblogs.com/EditPosts.aspx?postid=11661995&update ...

  8. Springboot02-配置文件

    配置文件读取 springboot中的配置文件都放在application.properties中,其中而k-v属性可以通过@Value("${属性名}")直接获取 @Compon ...

  9. 重读ORB_SLAM之Tracking线程难点

    1. 初始化 当获取第一帧图像与深度图后,首先设置第一帧位姿为4*4单位矩阵,然后为整个map添加关键帧与地图点.且更新地图点与关键帧的联系,例如地图点被哪个关键帧观测到,而此关键帧又包含哪些地图点. ...

  10. Windows OS PathTooLongException 转摘自http://www.cstruter.com/blog/308

    When I told one of my developer friends that I am going to write a post about the PathTooLongExcepti ...