zoukankan      html  css  js  c++  java
  • 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 ,并不会导致数据错误,如果你不在乎它们的顺序,那么还是可以用的。至于出现顺序错误的原因,我有空了会再看看,希望能够解决。

    *注:

  • 相关阅读:
    # 项目js文件修改后chrome无法更新的解决办法
    # 最小费用最大流
    《Ray Tracing in One Weekend》笔记
    关于 PSNR (Peak Signal-to-Noise Ratio) 峰值信噪比的个人理解
    PAT 甲级测试题目 -- 1017 Queueing at Bank
    pat 甲级测试题目 -- 1016 Phone Bills
    PAT 甲级测试题目 -- 1015 Reversible Primes
    PAT 甲级测试题目 -- 1014 Waiting in Line
    PAT 甲级测试题目 -- 1013 Battle Over Cities
    MacOS 相关开发环境配置
  • 原文地址:https://www.cnblogs.com/yuanshen/p/11898132.html
Copyright © 2011-2022 走看看