layui多图上传加隐藏域
我的情况是,通过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多图上传加隐藏域的更多相关文章
- layui多图上传实现删除功能
在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...
- layui多图上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。
公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...
- ThinkPHP5+Layui实现图片上传加预览
html代码 <div class="layui-upload"> <button type="button" class="lay ...
- ajax2.0之文件上传加跨域
express_server.js const express=require('express'); //主体 const body=require('body-parser'); //接收普通PO ...
- .Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
- layui中的多图上传
效果展示: 1.html部分: 注:<input> 作为隐藏域,用于保存多图上传的资源数组,方便后期进行 form 表单的提交 <input type="hidden&qu ...
- 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。
公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...
- [PHP] layui实现多图上传,图片自由排序,自由删除
实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...
随机推荐
- C#面向对象笔记
1.面向对象核心概念 (1)类是抽象,对象是实例,new一个对象会分配一块堆空间,对象指向该空间的地址,将对象赋值给另一个对象,只是将地址赋给它,指向的是同一块空间. e.g. class Car { ...
- bzoj 1026: [SCOI2009]windy数 & 数位DP算法笔记
数位DP入门题之一 也是我所做的第一道数位DP题目 (其实很久以前就遇到过 感觉实现太难没写) 数位DP题目貌似多半是问从L到R内有多少个数满足某些限制条件 只要出题人不刻意去卡多一个$log$什么的 ...
- 用 Flask 来写个轻博客 (36) — 使用 Flask-RESTful 来构建 RESTful API 之五
目录 目录 前文列表 PUT 请求 DELETE 请求 测试 对一条已经存在的 posts 记录进行 update 操作 删除一条记录 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 ...
- <读书笔记>《锋利的jQuery》
2016年4月3日 第4章 jq中的事件和动画 4.1 jq中的事件 (1)window.onload.$(documet).ready()的区别: 1.执行时机:window.onload需要整个页 ...
- Html5 学习笔记 Sublime text3 和 Emmet 插件
下载地址 :https://pan.baidu.com/s/1MpkaYdAcZd6RmPpmvOdK7w Emmet 压缩包 并且解压: 安装 Sublime Text 3, 选择首选项 浏览插件 ...
- 怎样使用haskell编写应用程序
参考:http://stackoverflow.com/a/9153617 http://www.haskell.org/haskellwiki/How_to_write_a_Haskell_prog ...
- SnowFlake --- 分布式id生成算法
转载自:https://segmentfault.com/a/1190000011282426 概述 SnowFlake算法生成id的结果是一个64bit大小的整数,它的结构如下图: 1位,不用.二进 ...
- vue - blog开发学7
将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...
- arcpy脚本使用多接图表图斑对对应多幅影像进行裁边处理
插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 先将 ...
- (十二)Bind读取配置到C#实例
继续上一节的,接下来用Options或者Bind把json文件里的配置转成C#的实体,相互之间映射起来.首先新建一个asp.net core mvc项目OptionsBindSample Startu ...