如何使用H5做出上傳圖片功能

這次帶給大家如何使用H5做出上傳圖片功能，如何H5做出上傳圖片功能的#注意事項##有哪些，下面就是實戰案例，一起來看看。

前幾日做了項目，其中有一個模組涉及到上傳圖片到伺服器。今天抽空整理了一下，發現越整理涉及的知識點越多，下面例子有參考百度的搜圖。

知識點：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、狀態常數

5、方法

##readAsTexx

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"这个字符串.

        
   
 拍摄   
  
   

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS中特性与UA检测

Ajax的工作原理核心以及对象

以上是如何使用H5做出上傳圖片功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！