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