根据layui上传图片和删除图片

1.上传图片

使用layui中的upload组件可以实现图片上传功能。

HTML代码：

<div class="layui-upload">
    <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="preview">
        <p id="uploadText"></p>
    </div>
</div>

JavaScript代码：

layui.use(['upload', 'layer'], function(){
    var upload = layui.upload;
    var layer = layui.layer;

    //执行实例
    var uploadInst = upload.render({
        elem: '#uploadBtn', //绑定元素
        url: '/upload/', //上传接口
        accept: 'images', //只允许上传图片
        size: 1024, //限制上传文件大小，单位KB
        done: function(res){
            //上传完毕回调
            if(res.code == 0){
                //上传成功
                $('#preview').attr('src', res.data.url);
                $('#uploadText').html('上传成功');
            }else{
                //上传失败
                layer.msg(res.msg, {icon: 2});
            }
        },
        error: function(){
            //请求异常回调
            layer.msg('上传失败', {icon: 2});
        }
    });
});

2.删除图片

在layui中，删除图片可以使用Ajax请求后端接口进行删除操作。

HTML代码：

<div class="layui-upload">
    <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="preview">
        <p id="uploadText"></p>
        <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn">删除图片</button>
    </div>
</div>

JavaScript代码：

layui.use(['upload', 'layer'], function(){
    var upload = layui.upload;
    var layer = layui.layer;
    var imageUrl = '';

    //执行实例
    var uploadInst = upload.render({
        elem: '#uploadBtn', //绑定元素
        url: '/upload/', //上传接口
        accept: 'images', //只允许上传图片
        size: 1024, //限制上传文件大小，单位KB
        done: function(res){
            //上传完毕回调
            if(res.code == 0){
                //上传成功
                imageUrl = res.data.url;
                $('#preview').attr('src', imageUrl);
                $('#uploadText').html('上传成功');
            }else{
                //上传失败
                layer.msg(res.msg, {icon: 2});
            }
        },
        error: function(){
            //请求异常回调
            layer.msg('上传失败', {icon: 2});
        }
    });

    //删除图片
    $('#deleteBtn').click(function(){
        if(imageUrl){
            //发送Ajax请求删除图片
            $.ajax({
                type: 'post',
                url: '/deleteImage',
                data: {
                    imageUrl: imageUrl
                },
                success: function(res){
                    if(res.code == 0){
                        //删除成功
                        $('#preview').attr('src', '');
                        $('#uploadText').html('');
                        imageUrl = '';
                    }else{
                        //删除失败
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function(){
                    //请求异常回调
                    layer.msg('删除失败', {icon: 2});
                }
            });
        }else{
            layer.msg('还未上传图片', {icon: 2});
        }
    });
});