ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

layUI批量上传文件

2022-02-25 23:36:55  阅读:141  来源: 互联网

标签:function index val 批量 layUI res 上传 files


            <div class="layui-form-item">
                <label class="layui-form-label febs-form-item-require">商品轮播图:</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-btn" id="commBigPathBtn">轮播图上传</div>
                        <input type="text"  name="commBigPath" id="commBigPath" maxlength="2000" autocomplete="off" class="layui-input">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="commBigPathView"></div>
                        </blockquote>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label febs-form-item-require">商品详情:</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-btn" id="commDetailsPathBtn">详情图上传</div>
                        <input type="text"  name="commDetailsPath" id="commDetailsPath" maxlength="2000" autocomplete="off" class="layui-input">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="commDetailsPathView"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
//轮播图片上传(多图上传)
        upload.render({
            elem: '#commBigPathBtn'
            ,url: 'comm/comm/import' //此处配置你自己的上传接口即可
            ,multiple: true
            ,acceptMime: 'image/*'
            ,before: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    $('#commBigPathView').append('<img  style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>') 
                });

                // 删除图片
                $("#commBigPathView").on("click", "i", function(res){
                    delete files[$(this).attr("index")]; //删除对应的文件
                    $(this).remove();
                    $("#"+$(this).attr("index")).remove();
                });
            }
            ,done: function(res, index){
                //如果上传成功
                if(res.code == 200){
                    debugger
                    layer.msg('上传成功',{icon: 1});
                    var imgpath = $('#commBigPath').val().split(",");
                    for(var i = 0 ; i < imgpath.length ; i++){
                        if(imgpath[i]==(res.message)){
                            imgpath[i] = res.data;
                        }
                    }
                    $('#commBigPath').val(imgpath.toString());


                }else{
                    layer.msg('上传失败',{icon: 2});
                }
            }
        });






        //详情图片上传(多图上传)
        upload.render({
            elem: '#commDetailsPathBtn'
            ,url: 'comm/comm/import' //此处配置你自己的上传接口即可
            ,multiple: true
            ,acceptMime: 'image/*'
            ,before: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    $('#commDetailsPathView').append('<img  style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>')

                });

                // 删除图片
                $("#commDetailsPathView").on("click", "i", function(res){
                    delete files[$(this).attr("index")]; //删除对应的文件
                    $(this).remove();
                    $("#"+$(this).attr("index")).remove();
                });
            }
            ,done: function(res, index){
                //如果上传成功
                if(res.code == 200){
                 
                    //上传成功
                    if($('#commDetailsPath').val()!="" && $('#commDetailsPath').val()!=null){
                        $('#commDetailsPath').val($('#commDetailsPath').val()+','+file.name);
                    }else{
                        $('#commDetailsPath').val(file.name);
                    }
}else{ layer.msg('上传失败',{icon: 2}); } } });

 

标签:function,index,val,批量,layUI,res,上传,files
来源: https://www.cnblogs.com/java-h/p/15938148.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有