layui 多图上传和删除图片

原创已于 2022-05-09 17:41:36 修改 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #ecmascript

于 2020-03-28 15:35:05 首次发布

thinkphp5 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一个基于layui框架的多图片上传组件实现过程。通过使用layui的upload模块，配合自定义的HTML结构，实现了多张图片的预览、上传及进度显示功能。文章提供了完整的代码示例，包括HTML结构、JS逻辑以及后台交互方式，适用于需要处理大量图片上传需求的项目。

显示层

<div class="layui-form-item layui-col-md-offset1 layui-col-md10">
    <label class="layui-form-label">多图片上传</label>
    <div class="layui-input-block">

        <input type="hidden" name="del" id="del" value="">
        <input type="hidden" id="hid" value="{$photourl}">
        <input type="hidden" name="photo" id="photo" value="{$photourl}">

        <div id="uploader" class="container">
            <div class="queueList">
                <div class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="layui-progress layui-progress-big active" lay-showpercent="true">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
                    </div>
                    <span></span>
                </div>
                <div class="info"></div>
                <div class="btns">
                    <div id="goPicker" class="filePicker2"></div>
                    <div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>

js代码 -----url指向你的后台上传操作

//多图片上传
upload.render({
    elem: '#multiple_img_upload'
    ,url: '/admin/Goods/upload'
    ,multiple: true
    ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
            $('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name
                +'" title="点击删除" class="layui-upload-img">')
        });
    }
    ,done: function(res){
        //如果上传成功
        if (res.status == 1) {
            //追加图片成功追加文件名至图片容器
            multiple_images.push(res.data.url);
            $('.multiple_show_img').val(multiple_images);
            layer.msg(res.msg);
        }else {
            //提示信息
            dialog.tip(res.message);
        }
    }
});

核心js ------type:代表可以上传的图片后缀名也可以加gif

var n = wk.uploads({num:3,type:'jpg,png',url:"{:url('admin/upload/upload')}"});
function imgDel(e,obj){
    wk.uploads_del(e,obj,n,"{:url('admin/upload/deleteLocality')}");
}