H5上传图片

最近做产品小A的需求,设计到图片的上传问题,整理一下。

PC上传图片

基本结构
  1. form[enctype="multipart/form-data"]
  2. input[type="file"]
  3. 上传完毕后,获取图片url,显示到页面上
问题
  1. 图片要上传完毕后,才能显示
  2. 压缩上传

H5 如何解决

  1. FileReader
  2. canvas

FileReader

FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。

var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
    $('img').attr('src', e.target.result);
};

FormData

实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。

var fd = new FormData();
 fd.append('filename', file);
$.ajax({
     url: 'xxxx/yyyy',
     data: fd,
     type: 'POST',
     cache: false,
     processData: false,
     contentType: false,
     dataType: 'json',
     success: function(data) {
     },
     error: function() {
     }
});

canvas

手机的流量是宝贵的,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。

var img = new Image();
img.src = base64;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    canvas.getContext("2d").drawImage(img, 0, 0);
    var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}

上传base64

使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案:

  1. server支持,单独开接口处理base64上传
  2. 前端将base64转化成File对象,复用原来的server接口

这里重点讨论第2中方案。JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。基于此,只需要把base64转化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。

// 解码base64
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// 类型数组
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
    type: mimeString
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb08-XML,tomcat,HTTP轻松入门

XML&tomcat&HTTP 一.XML基础知识 1. xml介绍 XML 指可扩展标记语言(EXtensible Markup Language),也是一种...

3589
来自专栏漏斗社区

工具| 手把手教你制作信息收集器之网站备案号

本期任务: 1.掌握备案号的收集 。 2.练习从http返回包中获取信息的能力。 3.所需工具: pip,http请求库:requests库,匹配库:r...

38810
来自专栏大内老A

如何让ASP.NET默认的资源编程方式支持非.ResX资源存储

之前写了两篇文章《.NET资源并不限于.ResX文件》(上篇、下篇),介绍了如何通过自定义ResourceManager的方式来扩展资源的存储形式。在那篇文章中...

1878
来自专栏阮一峰的网络日志

Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它...

34312
来自专栏nimomeng的自我进阶

Error handling官方文档

673
来自专栏逸鹏说道

初级.NET程序员,你必须知道的EF知识和经验

注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式。 推荐MiniProfiler插件 工欲善其事,必先利其器。 我们使用EF和...

30910
来自专栏挖坑填坑

使用.net core ABP和Angular模板构建博客管理系统(创建后端服务)

742
来自专栏有趣的django

Django REST framework+Vue 打造生鲜超市(十一) 十二、支付宝沙箱环境配置

十二、支付宝沙箱环境配置 12.1.创建应用 进入蚂蚁金服开放平台(https://open.alipay.com/platform/home.htm),登录后...

4446
来自专栏比原链

剥开比原看代码13:比原是如何通过/list-balances显示帐户余额的?

Gitee地址:https://gitee.com/BytomBlockchain/bytom

561
来自专栏Hongten

JSP 二讲

745

扫码关注云+社区