Java教程

layUI批量上传文件

本文主要是介绍layUI批量上传文件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
            <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}); } } });

 

这篇关于layUI批量上传文件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!