基于layui的多文件上传(图片)

--增加--
	
上传多张图片
预览图:
//多图片上传 upload.render({ elem: '#base-shop-info-btn-images_add' ,headers:header ,field:'image' ,accept:'images' ,url: config.base_server +'/portal/web/attachment/upload/image' //上传接口 ,done: function(res){ if(res.token!=null){ config.putToken(res.token); } //上传完毕回调 if(res.status){ console.log(config.file_server+res.data.src); $('#images_path_add').append('') var str = $("#shop_images_path_add").val(); $("#shop_images_path_add").val(str+config.file_server+res.data.src+ ",") ; } } ,error: function(){ //请求异常回调 } }); --修改-- upload.render({ elem: '#base-shop-info-btn-images_edit' ,headers:header ,field:'image' ,accept:'images' ,url: config.base_server +'/portal/web/attachment/upload/image' //上传接口 ,done: function(res){ if(res.token!=null){ config.putToken(res.token); } //上传完毕回调 if(res.status){ console.log(config.file_server+res.data.src); $('#images_path_edit').append('') var str = $("#shop_images_path_edit").val(); $("#shop_images_path_edit").val(str+config.file_server+res.data.src+ ",") ; } } ,error: function(){ //请求异常回调 } });
上传多张图片
预览图:
//单图片回显 $().ready(function(){ var img = $('#shop_image_path').val(); $('#image_path').attr('src',img); }) //多图片回显 $().ready(function(){ var imgStr = $('#shop_images_path_edit').val(); imgStr1 = imgStr.substring(0, imgStr.lastIndexOf(",")); imgStrArr = imgStr1.split(",") console.log(imgStrArr); for(var i=0; i') } })

 

你可能感兴趣的:(前端,layui,js,JavaScript,多文件上传,图片回显)