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 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Extensions in UWP Community Toolkit - Overview

概述 UWP Community Toolkit  中有一个 Extensions 的集合,它们可以帮助开发者实现很多基础功能,省去自己造轮子的过程,本篇我们先...

33512
来自专栏我和未来有约会

基于Cairngorm的Silverlight开发 - part4

通过绑定用视图来管理ModelLocator   由于绑定是双向的,所以在绑定到一些可以操作其自身属性的的控件时,对ModelLocator也是有影响的。这里...

2935
来自专栏IMWeb前端团队

Nodejs进阶:如何将图片转成datauri嵌入到网页中去

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nod...

1748
来自专栏跟着阿笨一起玩NET

C#常用操作类库四(File操作类)

371
来自专栏向治洪

android文件混淆详解

-injars  androidtest.jar【jar包所在地址】  -outjars  out【输出地址】 -libraryjars    'D:\a...

17010
来自专栏Linux驱动

26.QT-模型视图之自定义委托

由于模型负责组织数据,而视图负责显示数据,所以当用户想修改显示的数据时,就要通过视图中的委托来完成

592
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(8) -- 爬去MM图片

转载于:静觅 » Python爬虫实战四之抓取淘宝MM照片 链接:http://cuiqingcai.com/1001.html 1.抓取淘宝MM的姓名,头像,...

3936
来自专栏林冠宏的技术文章

关于java连接mysql数据库的几个问题的解决方法。

今天就为了连接下数据库获取信息来提供给ListView使用,搞了足足5小时。 出现的问题有:       第一个是,DriverManager.getConne...

1736
来自专栏流柯技术学院

JMeter专题系列(四)参数化

参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统。

542
来自专栏拂晓风起

SSH 项目过程中遇到的问题和解决方法汇总 struts2 spring hibernate

1143

扫码关注云+社区