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}); } } });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM