layui 多图上传和删除图片

显示层

<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')}");
}
### 实现Layui框架中的图片上传并支持删除功能 为了实现在 Layui 框架中进行图片上传以及提供相应的删除功能,可以采用如下方法: #### HTML部分 定义文件输入框用于选择个文件,并准备一个容器来展示已选的图片预览。 ```html <div class="layui-upload"> <button type="button" class="layui-btn">选择</button> <div class="layui-upload-list"> <img id="demo1" src="" alt=""> <p>预览区</p> </div> </div> <!-- 展示所选图片 --> <ul id="LAY_demo_upload"></ul> ``` #### JavaScript 部分 (基于Layui) 通过调用 `upload.render()` 方法配置上传组件的行为参数,包括设置允许的最大数量、监听事件处理程序等。对于每张成功加载后的像,在页面上创建对应的缩略链接;同时为这些新加入DOM节点绑定点击移除自身的逻辑[^4]。 ```javascript layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // 图片上传实例 var uploadInst = upload.render({ elem: '#testList' // 绑定元素 ,url: '/api/upload/' // 接口地址 ,accept: 'images' ,multiple: true ,before: function(obj){ // 预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#LAY_demo_upload').append('<li><img src="'+ result +'" title="'+ file.name +'"><span class="close">×</span></li>') }); } ,done: function(res){ console.log(res); } ,error: function(){ // 请求异常回调 } }); $(document).on('click','.close',(function(e){ e.preventDefault(); $(this).parent().remove(); })); }); ``` 上述代码片段展示了如何利用Layui库构建一个文件上传界面,并实现了基本的前端交互效果——即用户可以选择若干张照片并通过AJAX方式提交给服务器端保存;与此同时,还提供了简单的可视化反馈机制让用户能够即时看到自己挑选出来的素材列表,并且可以通过关闭按钮轻松撤销某项选择操作[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值