在商品详情等场景，经常会遇到封面图片，详情图片，而详情图片需要多张图片，虽然也可以一张一张的上传，但是，一次上传多张图片，还是能大量减轻工作量；
<!--_meta 作为公共模版分离出去--><!DOCTYPE HTML><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" /><link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" /><link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" /><link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" /><link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/skin/default/skin.css" id="skin" /><link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" /><!--/meta 作为公共模版分离出去--><title>添加图片 - 图片管理 - H-ui.admin v3.0</title><style>img {width: 120px;}</style><meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"><meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。"></head><body><button type="button" class="layui-btn" id="up">@csrf<i class="layui-icon"></i>上传图片</button><div id="upimg">缩略图</div></body></html>
<!--_footer 作为公共模版分离出去--><script type="text/javascript" src="/static/lib/jquery/jquery.min.js"></script><script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script><script type="text/javascript" src="/static/layui/layui.all.js"></script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript">layui.use('upload', function(){var $ = layui.jquery;var upload = layui.upload;var total = '';upload.render({elem: '#up',url: '/test/save_upload',accept: 'file' //普通文件,acceptMime: 'image/jpg, image/png',multiple:true,data: {_token: function(){return $('input[name="_token"]').val();}},allDone: function(obj){ //当文件全部被提交后，才触发layer.alert('上传文件总数：'+obj.total+'<br>'+'成功上传文件总数：'+obj.successful+'<br>'+'上传文件失败总数：'+obj.aborted);},done: function(res){if(res.code == 0){var imgs = res.url + ',';var newimgs = imgs.substring(0,imgs.length-1);var arr = newimgs.split(',');var xhnr = '';for (var i = 0;i<arr.length;i++){xhnr += '<img src="'+arr[i]+'" alt="">'+' ';}$('#upimg').append(xhnr);}}});})</script>
这个服务器端处理代码，根据各人需要求不同而不同，这里不再详述；
由于多图上传时，是分开调用接口，也就是说，有几张图片，就需要调用几次接口文件，接口就返回几次信息，因此简单去接收，容易出问题，所以需要把上传几张图片返回的信息统一保存到一个数组中，这个地方需要特点注意；
这个问题确实没有想到，明明定义了一个空数组，然后在空数组中添加元素，可是添加元素后却变成了字符串。没有办法，那就只能再把字符串变成数组了。
不过这个算是虚惊一场吧，JS中数组就是对象；
var newimgs = imgs.substring(0,imgs.length-1);
var arr = newimgs.split(‘,’);
下边这行代码是用“，”来分割字符串，可是上边那句代码知道什么意思吗，是要去掉字符串最后一个符号，为什么？好好想想吧，如果想不通，那就只能先照抄了。
如果是一张图片，那直接把后台反馈的信息接收，把拿到的url赋值给img的src属性就可以，但是由于每次上传图片数量不确定，所以html文档结构也就不确定，所以需要动态添加html页面元素，这就带来一定的难度，具体思路是：
for循环赋值给img的src属性，用一个数组接收，然后添加页面元素；
var xhnr = '';for (var i = 0;i<arr.length;i++){xhnr += '<img src="'+arr[i]+'" alt="">'+' ';}$('#upimg').append(xhnr);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
