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达人

说说JSON和JSONP( 含jquery例子)

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义...

2455
来自专栏守候书阁

重构 - 设计API的扩展机制

上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景--给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。当...

47217
来自专栏BeJavaGod

ssm redis 数据字典在J2EE中的多种应用与实现

数据字典在项目中是不可缺少的“基础设施”,关于数据字典如何设计如何实现,今天抽空讲一下吧 先看一下表设计: ? ? 通过自定义标签来实现页面的渲染: ? 再看...

3554
来自专栏JackieZheng

漫谈可视化Prefuse(一)---从SQL Server数据库读取数据

  上篇《可视化工具solo show-----Prefuse自带例子GraphView讲解》主要介绍了整个Prefuse工具集具有的一些特征、框架的运行流程,...

2236
来自专栏24K纯开源

Navigation Drawer的使用及遇到的问题

ActionBar的问题     Navigation View是Android Support Library中的一个新的组件,该组件提供类似于Sliding...

2005
来自专栏java一日一条

深入理解 Java 中的 try-with-resource

众所周知,所有被打开的系统资源,比如流、文件或者Socket连接等,都需要被开发者手动关闭,否则随着程序的不断运行,资源泄露将会累积成重大的生产事故。

1182
来自专栏逸鹏说道

Python3 与 C# 扩展之~模块专栏

代码裤子:https://github.com/lotapp/BaseCode/tree/maste

1165
来自专栏日常学python

数据抓取实践:对加密参数及压缩混淆 JS 的逆向分析

本文会介绍几种分析技巧,需要一点前端知识(总感觉在前端做防爬没什么意义,因为源码都是公开的)。文末附上爬虫 Demo 验证,虽然对于这个案例来说使用 Selen...

2970
来自专栏jeremy的技术点滴

采用go编写小工具

2964
来自专栏逸鹏说道

Python3 与 C# 扩展之~模块专栏

代码裤子:https://github.com/lotapp/BaseCode/tree/maste

1845

扫码关注云+社区