成都创新互联网站制作重庆分公司

使用H5做出上传图片功能的方法

小编给大家分享一下使用H5做出上传图片功能的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

成都创新互联成立与2013年,先为浦东等服务建站,浦东等地企业,进行企业商务咨询服务。为浦东企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

知识点:input file、base64、FileReader、canvas压缩、blob、btoa编码和atob解码、FormData。

html dom节点:

默认可以选择一个文件。需要上传多张。可以增加multiple="true" 属性。一般使用opacity:0;将默认样式隐藏,然后再重新写其样式。

1、创建对象

var fileReader = new FileReader();

2、判断浏览器是否兼容----ie8下不支持

if( window.FileReader )

3、状态常量

常量名描述
EMPTY0为开始读取文件
LOADING1文件读取中
DONE2文件读取完成

在下面例子中,可以分别读取当前状态。

4、属性

属性名描述
error读取文件时发生错误
readyState当前fileReader对象的状态,为上述状态常量的一个
result读取到的内容

5、方法

方法名参数描述
abort中止读取,在非LOADING状态时调用会抛出异常
readAsArrayBufferblob/file读取为数组,在result中有一个ArrayBuffer对象为读取的内容
readAsBinaryStringblob/file读取为二进制,在result中有读取文件的原始二进制
readAsDataUrlblob/file读取为dataUrl,在result中有data:url格式的字符串表示读取的内容
readAsTexxblob/file , [encoding]读取为文本,在result中字符串表示读取的内容

6、事件处理

事件描述
onabort中断时触发
onerror出错时触发
onload读取成功时触发
onloadend读取完成时触发(不论成功是否)
onloadstart读取开始时触发
onprocess读取中触发

BASE64:

我们用chrome打开一张图片,在resources里面显示的就是图片的base编码(实际上base编码比原图片稍大)

图片的base64编码也就是将一张图片编码成一个字符串,我们可以用这个字符串给img标签的src赋值,这样我们就可以看到这张图片。

如何编写:

在html中:

在css中:

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

优缺点:

优点:1、减少了http请求;2、可以被gzip;3、没有跨域问题;4、无需考虑在更新图片时缓存问题。

缺点:1、ie8以下不支持;2、不论是写在css文件还是html文件中,增加了文件的大小;3、图片大了之后,程序员编码相当困难;

应用:

根据实际需求来选择base64显示图片,或者选择css sprite,或者直接使用png等

一般使用场景:很少被更新,实际尺寸很小,在系统中大量使用。

canvas压缩:

在移动应用场景中,用户上传的图片一般很大,会导致上传时间过长而失败,既浪费时间也浪费流量,更影响用户体验。我们可以使用canvas的drawImage方法的图形裁剪功能。

1、新建image对象,给其src复制base64值,在其监听onload事件;

2、在onload事件方法中新建canvas对象,获取上下文context;

3、设置裁剪比例,调用drawImage方法填充图片。

4、通过toDataUrl方法获取裁剪之后的base64值。

详细见下例。

Blob

在传输一些比较大的图片的base64是容易出现转发错误,这里我们可以将base64转换成blob字段写到form表单中提交到后台。一般blob和base64之间的相互转换通过fileReader 的readAsDataUrl和ArrayBuffer的charCodeAt方法。下面列举几个相互转换的方法。来自(http://jsperf.com/blob-base64-conversion)

 var blobToBase64 = function(blob, cb) {
     var reader = new FileReader();
     reader.onload = function() {
       var dataUrl = reader.result;
       var base64 = dataUrl.split(',')[1];
       cb(base64);
     };
     reader.readAsDataURL(blob);
     };
 var base64ToBlob = function(base64, cb) {
     var binary = atob(base64);
     var len = binary.length;
     var buffer = new ArrayBuffer(len);
     var view = new Uint8Array(buffer);
     for (var i = 0; i < len; i++) {
       view[i] = binary.charCodeAt(i);
     }
     cb(new Blob([view]));
     };
 var base64ToBlobSync = function(base64) {
     var binary = atob(base64);
     var len = binary.length;
     var buffer = new ArrayBuffer(len);
     var view = new Uint8Array(buffer);
     for (var i = 0; i < len; i++) {
       view[i] = binary.charCodeAt(i);
     }
     var blob = new Blob([view]);
     return blob;
     };
 var blobToBase64_2 = function(blob, cb) {
     var reader = new FileReader();
     reader.onload = function() {
       var buffer = reader.result;
       var view = new Uint8Array(buffer);
       var binary = String.fromCharCode.apply(window, view);
       var base64 = btoa(binary);
       cb(base64);
     };
     reader.readAsArrayBuffer(blob);
     };

btoa 与 atob:      ---在对base64转blob时就需要用atob对base64进行解码

btoa("javascript");     //"amF2YXNjcmlwdA=="
atob("amF2YXNjcmlwdA==") ;       //"javascript"

注意:在需要转码中文时,需要用encodeURIComponent方法对中文处理,解码时用decodeURIComponent

btoa(encodeURIComponent("我喜欢 javascript"));    //"JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="
decodeURIComponent(atob("JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="));   //"我喜欢 javascript"
FormData:

我们只需要使用new FormData()创建对象,然后append键值对,后用ajax向后台发生即可。

这里是往FormData对象添加blob字段。

注:使用Ajax将这个FormData对象提交到服务器上时,所发送的HTTP请求头中代表那个Blob对象所包含文件的文件名称的"Content-Disposition"请求头的值会是一个空字符串,这会引发某些服务器程序上的错误.从Gecko 7.0开始,这种情况下发送的文件名称改为"blob"这个字符串.

使用H5做出上传图片功能的方法




 
 
 Document
    



 

拍摄

看完了这篇文章,相信你对使用H5做出上传图片功能的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章标题:使用H5做出上传图片功能的方法
网址分享:http://cxhlcq.com/article/jehghh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部