首页 > 代码库 > h5_PC上传图片

h5_PC上传图片

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 = http://www.mamicode.com/base64;"keyword">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的构造参考 这里 ,可以使用类型数据来处理。

// 解码base64var 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});

h5_PC上传图片