15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 后端开发 Thinkphp5

tp5+layui多图上传,按照顺序上传

王少铮| 发布于 2021-08-19 17:41:34| 187阅读| 0点赞| 0评论
举报

layui多图上传的完善代码,可实现按照顺序上传

html部分代码

<div class="layui-form-item">
        <label class="layui-form-label">详情图上传</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">详情图</button>
            <div class="layui-inline layui-word-aux">
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图:
                <div class="layui-upload-list" id="demo2"></div>
                {if isset($data)}
                {volist name="data.images" id="vo"}                //此处的div是为了方便点击去除需要上传的图片
                <div class="abc">
                    <img src="{$vo}" alt="" style="width: 800px;height: 600px"/>
                    <input type="hidden" name="images[]" value="{$vo}"/>
                </div>
                {/volist}
                {/if}
            </blockquote>
        </div>
    </div>

点击去除图片代码

$(document).on('click','.layui-quote-nm img',function () {
        $(this).parent().remove()
    })

layui提交部分

var arr = new Array();
        var uploadInst = upload.render({
            elem : '#test2',
            accept : 'images',//指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
            multiple : 'true',
            url : '/admin/image/upload',
            before:function(obj){
                console.log(obj)
                var load = layer.load();
            },
            done: function(res,index,upload){
                arr[index.substr(14)]=res;
                layer.msg(res.msg,{time:'3000',tipsMore: true,zIndex:'2'});
            },
            allDone: function(obj){ //当文件全部被提交后,才触发
                layer.closeAll();
                // arr = arr.sort()
                console.log(arr);
                for(var i=0;i<arr.length;i++){
                    $('blockquote.layui-quote-nm').<a href="https://www.qinfenniao.com/nav/%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91.html" target="_blank">app</a>end('<div class="abc"><img src="'+ arr[i].path +'" class="layui-upload-img" style="width: 800px;height: 600px"/><input type="hidden" name="images[]" id="fhimage" value="'+arr[i].path+'"/></div>')
                }
                $('.layui-word-aux').<a href="https://www.qinfenniao.com/nav/%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91.html" target="_blank">app</a>end("执行完毕,文件总数:"+obj.total+"成功:"+obj.successful+"个,失败:"+obj.aborted+"个");
            },
            error : function(){

                //请求异常
            }

        });

如果在done里提交的话,有些图片大小不一样,哪个先上传完就会先显示哪个,顺序会乱,所以将数据放到了allDone里面,这样的话可以保持上传的顺序不乱

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王少铮
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部