layUi 上传多图片问题解决

原创 2018年04月17日 09:46:24

layUi上传多文件删除后继续上传会将删除前的文件继续上传解决办法:

先看效果页面


html

<div class="layui-input-block layedit-tool-help" style="float: left">
    <div>
        <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image" style="width: 400px;height: 400px">
    </div>
    <div class="layui-form-item" style="margin-top: 20px">
        <div  style="float: left;margin-left:10px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image0"  style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px" class="aaa">
                <button type="button" class="layui-btn layui-btn-xs" id="upload" lay-data="{index:'0'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del0"  style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>

        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image1" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload1" lay-data="{index:'1'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del1" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image2" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload2" lay-data="{index:'2'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del2" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image3" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload3" lay-data="{index:'3'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del3"  style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image4" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload4" lay-data="{index:'4'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del4" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width:400px;color: red">
        <span>
            说明:为了商品展示图片的美观性,请注意</br>
            1、图片需为正方形;</br>
            2、建议上传800*800的方图,最小尺寸不得小于450*450;</br>
            3、单张图片大小不可超过2M;
        </span>
    </div>
</div>

js实现

function  uploadCommers(id,array) {
    var fileId = "";
    var uploadInst = upload.render({
        elem: '#'+id //绑定元素
        ,url: url_fileUpload+'api/file/fileUpload?bid=&ftype=图片'
        ,auto: true //选择文件后不自动上传
        ,multiple:true
        ,size:100
        // ,bindAction: '#fileAction'
        ,before: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            var index1 =this.index;
            //读取本地文件
            obj.preview(function(index, file, result){
                if(index1 == "0"){
                    var tr =  $("#image").attr("src",result);
                }
                var tr =  $("#image"+index1).attr("src",result);
                $("#"+id).hide();
                $("#del"+index1).show();

                $("#del"+index1).on("click",function () {
                    //请求删除
                    $.ajax({
                        url:url_fileUpload+'api/file/deleteFile',
                        type: "POST",
                        data:{
                            "id":fileId
                        },
                        dataType: "json",
                        success: function(data){
                            if(data.code==0){
                                delete files[index];
                                uploadInst.config.elem.next()[0].value = '';
                                $("#del"+index1).hide();
                                $("#"+id).show();
                                $("#image"+index1).attr("src","../../plugins/layui/images/default.jpg");
                                $(".aaa").load(location.href+" .aaa");
                                form.render();
                                //location.reload();
                            }else{
                                layer.msg(data.msg, {icon: 5});
                            }

                        }
                    });

                });
            });
        }
        ,allDone: function(obj){ //当文件全部被提交后,才触发

        }
        ,done: function(res, index, upload){
            debugger
            if(res.code == 0) { //上传成功

                fileId = res.data.id;
                array.push(res.data);
                console.log(res.data.id)

            }
        }
        ,error: function(res,index, upload){

        }
    });
需将上面标黄的写上即可;

layui 上传插件 带预览 非自动上传功能 (非常实用)

首先 Html部分: &amp;lt;form method=&quot;post&quot; action=&quot;?&quot; onsubmit=&quot;return check();&...
  • qq_37246267
  • qq_37246267
  • 2018-04-04 10:29:55
  • 84

图片/文件上传 - layui.upload

图片/文件上传 - layui.upload普通上传文件是借助 type=&quot;file&quot; 的 input 标签来完成的, 这太low了本文是利用 layui 做 两种情况下的图片上传...
  • qq_38490778
  • qq_38490778
  • 2018-03-28 16:42:19
  • 88

layui 富文本 图片上传 后端PHP接口

layui 富文本 图片上传 后端PHP接口html
  • wodecc_u
  • wodecc_u
  • 2017-08-09 16:10:31
  • 948

layui上传图片插件

最近在做一个多图片上传,并可点击预览图片和删除图片,看页面效果 1. 2. 3.点击图片x可进行删除 4.上传用的layui插件,layui在项目中的具体使用 ...
  • only_musm
  • only_musm
  • 2018-02-07 15:03:22
  • 309

layui的upload组件选择了图片却不请求服务器

原因: 我给form标签加上了onsubmit="return false"。
  • tangxinzhuan
  • tangxinzhuan
  • 2017-05-24 18:13:44
  • 953

layui多图片上传并预览

layui多图片上传1.0更新(1)图片上传本地目录(2)删除本地页面图片(非删除本地目录文件图片)一、控制器public function upload(){ $pathName = $...
  • Jack_num1
  • Jack_num1
  • 2018-04-04 10:39:17
  • 194

node+layui实现图片上传预览和删除功能

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;...
  • zhuoganliwanjin
  • zhuoganliwanjin
  • 2018-03-20 17:01:31
  • 6614

layui的多文件上传

平时上传文件需要按住Ctrl同时选中多文件才能上传多个,layui可以一个一个选上传多个代码如下:导入jq和layui.css  &amp;lt;script src=&quot;http://lib...
  • mmmmmmmmya
  • mmmmmmmmya
  • 2018-03-16 10:52:16
  • 663

layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)

layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)...
  • qzw_wmh
  • qzw_wmh
  • 2017-12-20 18:44:36
  • 1629

38.layer上的图片裁剪 矩阵操作

- (void)drawRect:(CGRect)rect { // Drawing code // 画圆, 以便于以后指定可以显示内容范围 CGContextRef ctx =...
  • u012493967
  • u012493967
  • 2015-06-01 13:50:08
  • 752
收藏助手
不良信息举报
您举报文章:layUi 上传多图片问题解决
举报原因:
原因补充:

(最多只允许输入30个字)