当前位置： 移动技术网 > IT编程>开发语言>JavaScript > layui 图片与表单一起提交 + layer.photos图片层预览

layui 图片与表单一起提交 + layer.photos图片层预览

2019年03月23日  | 移动技术网IT编程  | 我要评论 
html基本结构：
<form class="layui-form" action="" id="feedbackform">
        <div class="layui-form-item">
        <!--表单内容-->
        </div>

        <!--图片上传-->
        <div class="layui-upload feedback-padding">
        <button type="button" class="layui-btn" id="selectimg">选择图片</button>
        <input type="text" class="layui-hide" name="">
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
    <div id="previewimg" class="layui-clear feedback-overflow">
        </div>
        </blockquote>
        </div>

        <div class="layui-form-item">
        <div class="feedback-block">
        <button id="submitbtn" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
        </div>
        </form>

 

javascript基本内容：
1、多图片上传、预览
    //多图片上传
    uploadlist = upload.render({
        elem: '#selectimg'
        ,url: "/add.do"
        ,accept: 'images'
        ,acceptmime: 'image/*'
        ,method: 'post'
        ,multiple: true
        ,auto: false
        ,choose: function(obj){
            files = obj.pushfile(); //将每次选择的文件追加到文件队列

            //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
            obj.preview(function(index, file, result){
                var imgbox = document.createelement("div");//预览图、删除预览图按钮容器
                var imgdelete = document.createelement("div");//删除预览图按钮
                var imgobj = new image(); //创建新img对象

                imgbox.style.float = 'left';
                imgbox.style.position = 'relative';

                imgdelete.setattribute('class',"feedback-delete-btn layui-icon layui-icon-close-fill");
                imgdelete.setattribute ('title','删除');

                imgobj.src = result; //指定数据源
                imgobj['layer-src'] = result;
                imgobj.alt = file.name;
                imgobj.classname = 'layui-upload-img';
                imgobj['layer-index'] = index;

                imgbox.appendchild(imgobj);
                imgbox.appendchild(imgdelete);

                imgdelete.onclick = function () { // 为预览图的删除按钮绑定删除事件
                    delete files[index]; //删除对应的文件
                    document.getelementbyid("previewimg").removechild(imgbox);//从预览区域移除
                    uploadlist.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                }

                document.getelementbyid("previewimg").appendchild(imgbox); //添加到预览区域

                //photos 图片层
                layer.photos({//此处目前存在bug 导致单击后无法在弹层中打开预览  下面会讲解如何处理
                    photos: '#previewimg'
                    ,anim: 0
                });
            });
        }
    });
2、提交
    //监听提交
    form.on('submit(demo1)', function(data){
        var myform = document.getelementbyid("feedbackform");
        var formdata = new formdata(myform);

        //循环 files(第一步choose回调中储存的对象)  逐条插入到formdata
        for (var i in files) {
            formdata.append("files",files[i]);//此处的files为上传接口参数名
        }

        $.ajax({
            url: "/add.do",
            type: "post",
            data: formdata,
            async: false,
            contenttype: false,
            processdata: false,
            error: function () {
                layer.msg('网络超时',{icon:2});
            },
            success: function (data) {
                layer.msg('成功',{icon:1});
            }
        })
        return false;
    });
3、步骤一中  layer.photos 重复调用，导致弹层预览图无法正常显示处理：

修改layer.js源码 ，点击事件绑定之前，先用off（）进行解绑，避免重复绑定，如下：
    loop || parent.off('click').on('click', options.img, function(){
        var othis = $(this), index = othis.attr('layer-index');
        layer.photos($.extend(options, {
            photos: {
                start: index,
                data: data,
                tab: options.tab
            },
            full: options.full
        }), true);
        pushdata();
    })

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网