Layui实现图片上传回显和删除

需求及功能说明

网页上传图片到服务器，图片在本地回显，可以实现删除，重新修改的操作。
相关组件来源于Layui上传文件模块——传送门: 图片/文件上传-Layui.

前端代码详解

<div class=" layui-form-item layui-upload">
     <label class="layui-form-label" style="text-align: left">文章封面</label>
     <div class="layui-input-block">
     	  <#--隐藏输入框 用来存放要上传的图片路径-->
          <input id="cover" type="hidden" class="layui-input">
          <#--Layui上传按钮组件-->
          <button class="layui-btn" id="preview_img" type="button">
          <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <#--图片预览区域-->
          <div id="ImgPreview"></div>
          <#--上传后的信息提示-->
    	  <p id="demoText"></p>
	</div>
</div>

注释写的很清楚了，一看就懂

JS代码

整体代码，可直接复制看看效果

<script type="text/javascript">
    layui.use(['form', 'layer', 'upload','element'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            element = layui.element;
        form.render();   //表单渲染，得渲染才会有效果显示出来

        //图片上传
        upload.render({
            elem: '#preview_img'
            ,url:'/resource/uploadCover'
            ,accept: 'images'
            ,field: 'cover'
            ,size: 50 * 1024 * 1024
            ,choose: function (obj) {
                    //将每次选择的文件追加到文件队列
                    var files = obj.pushFile();
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {
                            $('#ImgPreview').empty();
                        }
                        // 添加图片 ImgPreview-预览的dom元素的id
                        $('#ImgPreview').append('<div class="image-container" id="container'+index+'">' +
                            '<div class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe640;</i></button></div>' +
                            '<img id="showImg" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
                        //删除某图片
                        $("#upload_img").bind('click', function () {
                            delete files[index];
                            $("#container"+index).remove();
                            var demoText = $('#demoText');
                            demoText.html('');
                        });

                        //某图片放大预览
                        $("#showImg").bind('click',function () {
                            var width = $("#showImg").width();
                            var height = $("#showImg").height();
                            var scaleWH = width/height;
                            var bigH = 600;
                            var bigW = scaleWH*bigH;
                            if(bigW>900){
                                bigW = 900;
                                bigH = bigW/scaleWH;
                            }

                            // 放大预览图片
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: 1,
                                shadeClose: true,
                                area: [bigW + 'px', bigH + 'px'], //宽高
                                content: "<img width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
                            });
                        });
                    });
                }
            , done: function (res) {
                if (res.code>0){
                    return layer.msg('上传失败');
                }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #206bc4;">上传成功</span>');
                var coverUpload = $("#cover");
                coverUpload.attr('value',res.data.src);//给隐藏输入框复制
            }
            , error: function () {
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    })
</script>

下面分模块做一个详解
layui.use（mods, callback)方法，用过Layui的都知道，不再细说。

核心方法即upload.render(options) 方法，相关参数及配置见Layui文档——传送门: 图片/文件上传-Layui.
choose()是选择文件后的回调函数。返回一个object参数。当图片选择后，用append()方法追加所添加的图片和删除按钮的相关元素。

$('#ImgPreview').append('<div class="image-container" id="container'+index+'">' +
                            '<div class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe640;</i></button></div>' +
                            '<img id="showImg" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');

其中index是所选择的图片的标签，或者说ID，这里我设置了单张图片的上传，所以这个index唯一。当多图上传时，index的作用就出来了。

然后id="upload_img"的这个按钮绑定了删除图片的事件，而id="showImg"的这张图片绑定了放大预览的事件。

看一下效果图

当上传成功后，利用这行代码给隐藏的输入框赋值，便于后续的表单的提交。

var coverUpload = $("#cover");
                coverUpload.attr('value',res.data.src);

总结

Layui的组件还是挺好用的，把文档细品一下，然后在此基础上进行二次开发就可以得到自己想要的结果啦！

我是爱学习的诸葛铁锤，觉得有用的话点个赞哈，啾咪