最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于是就有了本文的内容。

HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文件，根据 W3C 的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result 属性中。

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader还包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

了解了H5提供的 FileReader 后，我们就使用 FileReader 来实现同事选择多张图片并上传。

首先，在 HTML 加入一个file表单，并设置其为 multiple（浏览器在对multiple、disabled、checked、selected等这类属性进行解析时，只要这些属性存在，默认的就会被解析成true，甭管你设置的是disabled=true或者disabled=false亦或是disabled=""，如果不想这些属性起作用，唯有用js来remove掉这些属性，除非你不设置这些属性。），并设置accept="image/*"用以只能选择图片类型的文件，代码如下：

<input type="file" accept="image/*" name="upload" id="upload" multiple>
<input type="hidden" id="hiddenImgUrl" />  <!--设置这个隐藏域是为了便于存放上传至服务器后返回的图片地址-->

接下来就到了js上场了：

//图片上传
var file = {
  upload: function (e) {
    var self = this;
    var files = e.target.files;
    var type = files[0].type.split('/')[0];
    if (type != 'image') {
      alertMsg('请上传图片');
      return;
    }
    //var size = Math.floor(file.size / 1024 / 1024);
    //if (size > 3) {
    //  alert('图片大小不得超过3M');
    //  return;
    //};
    for (var i = 0; i < files.length; i++) {
      var reader = new FileReader();
      reader.readAsDataURL(files[i]);
      reader.onloadstart = function () {
        //用以在上传前加入一些事件或效果，如载入中...的动画效果
      };
      reader.onloadend = function (e) {
        var dataURL = this.result;
        var imaged = new Image();
        imaged.src = dataURL;
        imaged.onload = function () {  //利用canvas对图片进行压缩
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          var w = 0;
          var h = 0;
          if (this.width > this.height) {
            h = 1000;
            var scale = this.width / this.height;
            h = h > this.height ? this.height : h;
            w = h * scale;
          }
          else {
            w = 1000;
            var scale = this.width / this.height;
            w = w > this.width ? this.width : w
            h = w / scale;
          }
          var anw = document.createAttribute("width");
          var anh = document.createAttribute("height");
          if (this.width > this.height) {
            anw.value = h;
            anh.value = w;
          }
          else {
            anw.value = w;
            anh.value = h;
          }
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          if (this.width > this.height) {
            ctx.translate(h, 0);
            ctx.rotate(90 * Math.PI / 180)
            ctx.drawImage(this, 0, 0, w, h);
            ctx.restore();
          }
          else {
            ctx.drawImage(this, 0, 0, w, h);
          }
          dataURL = canvas.toDataURL('image/jpeg');
          //回调函数用以向数据库提交数据
          self.callback(dataURL);
        };
      };
    }
  },
  event: function () {
    $("#upload").change(function (e) {      
      file.upload(e);
    });
  },
  callback: function (dataURL) {
    $.ajaxSettings.async = false;  //这里必须将ajax的异步改为同步才可以把返回并保存在隐藏域中的图片地址取出同时加在地址栏中作为参数一并传入下一个页面，这样做的目的是因为返回的图片地址不是一个json数组，而是单个的json字符串，所以只能将返回的图片地址json字符串拼接在一起作为参数传到下一个页面
    $.post(url, dataURL, function (res) {  //将base64图片流的图片通过后台转换成普通的图片路径并上传至服务器
      var imgUrl = $("#hiddenImgUrl").val();
      if (res.success) {
        $(".loading").hide();
        if (imgUrl != "") {
          $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl);  //中间加一个 | 是为了到下一个页面便于将传过去的图片地址参数转换为数组
        } else {
          $("#hiddenImgUrl").val(res.imgUrl);
        }
        var imgUrl = $("#hiddenImgUrl").val();
        window.location.href = "apply.html?imgUrl=" + imgUrl;
      } else {
        alert(res.message);
      }
    }, "json");
  },
  init: function () {
    this.event();
  }
}
file.init();

由于在通过post向服务器上传时采用了同步的方式，所以我在写项目的过程中，老是无法实现加载中的动画效果，并且把加载中的动画效果放在 reader.onloadstart方法中依旧不起作用，最后只能放在了$("#upload").change(function (e) {})方法中，代码如下：

event: function () {
    $("#upload").change(function (e) {
      $(".loading").show();     
      file.upload(e);
    });
  }

以上是同时上传多张图片并将图片传入下一个页面继续进行后续操作，那么如何在同时上传完多张图片后在本页再预览这些图片呢？其实方法也是很简单的，上边callback函数里边的$.post的返回值里就包含了上传至服务器后的图片路径，将这些路径赋给img标签的src，然后再插入到页面中就OK了，代码如下：

callback: function (dataURL) {    
    $.post(url, dataURL, function (res) {  //将base64图片流的图片通过后台转换成普通的图片路径并上传至服务器
      if (res.success) {
        $(".loading").hide();
        var result = '<div class="result"><img src="'+res.imgUrl+'" alt=""/></div>';
        var div = document.createElement('div');
        div.innerHTML = result;
        document.body.appendChild(div);        
      } else {
        alert(res.message);
      }
    }, "json");
  }

以上在预览图片时由于不需要跳转，不需要传入返回的所有图片的路径作为参数，所以也就不需要将ajax的异步设置为同步了。

以上所述是小编给大家介绍的JS移动端/H5同时选择多张图片上传并使用canvas压缩图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js  # 移动端多张图片上传  # h5  # canvas  # 压缩  # 小程序中canvas的drawImage方法参数使用详解  # 微信小程序canvas.drawImage完全显示图片问题的解决  # canvas压缩图片转换成base64格式输出文件流  # Vue使用canvas实现图片压缩上传  # JS和Canvas实现图片的预览压缩和上传功能  # Js利用Canvas实现图片压缩功能  # Canvas drawImage方法实现图片压缩详解  # 多张  # 上传  # 传至  # 的是  # 我在  # 放在  # 不需要  # 图片上传  # 这段  # 即是  # 转换成  # 表单  # 小编  # 上传图片  # 值为  # 宋体  # 是为了  # 后端  # 这是  # 他们的 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Laravel PHP版本要求一览_Laravel各版本环境要求对照  在Oracle关闭情况下如何修改spfile的参数  Java遍历集合的三种方式  如何在服务器上配置二级域名建站？  如何批量查询域名的建站时间记录？  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  黑客入侵网站服务器的常见手法有哪些？  javascript中的try catch异常捕获机制用法分析  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  海南网站制作公司有哪些,海口网是哪家的？  如何解决hover在ie6中的兼容性问题  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  浅谈Javascript中的Label语句  智能起名网站制作软件有哪些,制作logo的软件？  高端建站三要素：定制模板、企业官网与响应式设计优化  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  JS弹性运动实现方法分析  如何用JavaScript实现文本编辑器_光标和选区怎么处理  JavaScript中的标签模板是什么_它如何扩展字符串功能  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  Python面向对象测试方法_mock解析【教程】  Android Socket接口实现即时通讯实例代码  重庆市网站制作公司,重庆招聘网站哪个好？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何打造高效商业网站？建站目的决定转化率  独立制作一个网站多少钱,建立网站需要花多少钱？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  JS实现鼠标移上去显示图片或微信二维码  大同网页,大同瑞慈医院官网？  如何在自有机房高效搭建专业网站？  微信小程序 闭包写法详细介绍  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  Laravel如何使用Blade模板引擎？（完整语法和示例）  IOS倒计时设置UIButton标题title的抖动问题  原生JS实现图片轮播切换效果  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？