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}); } } });
你所拥抱的并不总是拥抱你