PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 20200224-多图上传平坑记

20200224-多图上传平坑记

邯郸易住宋至刚
邯郸易住宋至刚 原创
2020年02月24日 16:43:16 663浏览

一、多图上传

在商品详情等场景,经常会遇到封面图片,详情图片,而详情图片需要多张图片,虽然也可以一张一张的上传,但是,一次上传多张图片,还是能大量减轻工作量;

(一)HTML

  1. <!--_meta 作为公共模版分离出去-->
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
  7. <link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" />
  8. <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" />
  9. <link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
  10. <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/skin/default/skin.css" id="skin" />
  11. <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" />
  12. <!--/meta 作为公共模版分离出去-->
  13. <title>添加图片 - 图片管理 - H-ui.admin v3.0</title>
  14. <style>
  15. img {
  16. width: 120px;
  17. }
  18. </style>
  19. <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
  20. <meta name="description" content="H-ui.admin v3.0,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。">
  21. </head>
  22. <body>
  23. <button type="button" class="layui-btn" id="up">
  24. @csrf
  25. <i class="layui-icon">&#xe67c;</i>上传图片
  26. </button>
  27. <div id="upimg">缩略图</div>
  28. </body>
  29. </html>

(二)JS

  1. <!--_footer 作为公共模版分离出去-->
  2. <script type="text/javascript" src="/static/lib/jquery/jquery.min.js"></script>
  3. <script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>
  4. <script type="text/javascript" src="/static/layui/layui.all.js"></script>
  5. <script type="text/javascript" src="/static/layui/layui.js"></script>
  6. <script type="text/javascript">
  7. layui.use('upload', function(){
  8. var $ = layui.jquery;
  9. var upload = layui.upload;
  10. var total = '';
  11. upload.render({
  12. elem: '#up'
  13. ,url: '/test/save_upload'
  14. ,accept: 'file' //普通文件
  15. ,acceptMime: 'image/jpg, image/png'
  16. ,multiple:true
  17. ,data: {
  18. _token: function(){
  19. return $('input[name="_token"]').val();
  20. }
  21. }
  22. ,allDone: function(obj){ //当文件全部被提交后,才触发
  23. layer.alert('上传文件总数:'+obj.total+'<br>'+'成功上传文件总数:'+obj.successful+'<br>'+'上传文件失败总数:'+obj.aborted);
  24. }
  25. ,done: function(res){
  26. if(res.code == 0){
  27. var imgs = res.url + ',';
  28. var newimgs = imgs.substring(0,imgs.length-1);
  29. var arr = newimgs.split(',');
  30. var xhnr = '';
  31. for (var i = 0;i<arr.length;i++){
  32. xhnr += '<img src="'+arr[i]+'" alt="">'+'&nbsp;&nbsp;';
  33. }
  34. $('#upimg').append(xhnr);
  35. }
  36. }
  37. });
  38. })
  39. </script>

(三)接口文件

这个服务器端处理代码,根据各人需要求不同而不同,这里不再详述;

二、平坑儿

1、上传成功回调

由于多图上传时,是分开调用接口,也就是说,有几张图片,就需要调用几次接口文件,接口就返回几次信息,因此简单去接收,容易出问题,所以需要把上传几张图片返回的信息统一保存到一个数组中,这个地方需要特点注意;

2、存到一个文件中,结果这个文件类型是字符串

这个问题确实没有想到,明明定义了一个空数组,然后在空数组中添加元素,可是添加元素后却变成了字符串。没有办法,那就只能再把字符串变成数组了。

3、字符串变成数组,结果这个文件类型又变成了对象

不过这个算是虚惊一场吧,JS中数组就是对象;

var newimgs = imgs.substring(0,imgs.length-1);
var arr = newimgs.split(‘,’);
下边这行代码是用“,”来分割字符串,可是上边那句代码知道什么意思吗,是要去掉字符串最后一个符号,为什么?好好想想吧,如果想不通,那就只能先照抄了。

4、图片预览

如果是一张图片,那直接把后台反馈的信息接收,把拿到的url赋值给img的src属性就可以,但是由于每次上传图片数量不确定,所以html文档结构也就不确定,所以需要动态添加html页面元素,这就带来一定的难度,具体思路是:
for循环赋值给img的src属性,用一个数组接收,然后添加页面元素;

  1. var xhnr = '';
  2. for (var i = 0;i<arr.length;i++){
  3. xhnr += '<img src="'+arr[i]+'" alt="">'+'&nbsp;&nbsp;';
  4. }
  5. $('#upimg').append(xhnr);
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议