如何使用H5做出上传图片功能

前几日做了项目，其中有一个模块涉及到上传图片至服务器。今天抽空整理了下，发现越整理涉及的知识点越多，下面例子有参考百度的搜图。

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

htML dom节点：

input tyPE="file">
    

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

1、创建对象

VAR fileReader = new FileReader();

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

if( window.FileReader )

3、状态常量

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

4、属性

5、方法

6、事件处理

BASE64:

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

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

如何编写：

在html中：

img src="data:image/gif;
    base64,R0lGODlhAwADaiABAL6+vv///yH5BAEAAAEALAAAAAADAamAAAIDjA9WADs=">
    

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

!DOCTYPE html>
    html lang="en">
    head>
     meta charset="UTF-8">
     meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
     title>
    Document/title>
     script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js">
    /script>
       !--引用baidu-->
    /head>
    style>
.uploadPic{
     width: 92%;
       position: relative;
       margin: 0 auto;
       height: 2.8rem;
       line-height: 2.8rem;
       font-Size: 1.3rem;
       border-radius: 4px;
       color: #fff;
       text-align: center;
       background-color: #72bcc5;
}
    .uploadPic>
input{
     position: absolute;
       display: block;
       width: 100%;
       height: 100%;
       right: 0;
       top: 0;
       opacity: 0;
}
    .uploadPic>
img{
     border:none;
}
    /style>
    body>
     p id="uploadPic" class="uploadPic">
     span>
    拍摄/span>
     input type="file" >
      !--这里可以添加multiple="true"属性，用来添加多张图片，然后对this.file[]数组操作-->
     p style="line-height: 1rem;
    margin: 0.5rem 0;
    ">
    progress id="progress" value="0" max="100" style="width: 100%;
    ">
    /progress>
    /p>
      img src="" width="100%" style="height: 21rem;
    ">
     /p>
    /body>
    script>
 function upload(file, callBack) {
            var loading=0;
            var total=file.size;
        if(window.FileReader){
             $("#progress")[0].value=0;
             var fileReader = new FileReader();
         fileReader.onload = function() {
              console.LOG(fileReader.readyState);
  //读取完成             comPressPic(this.result,callBack)         }
    ;
         fileReader.onerror = function() {
              console.log(fileReader.error);
         }
    ;
         fileReader.onprogress = function (e){
              console.log(fileReader.readyState);
      //读取中          loading += e.loaded;
              $("#progress")[0].value=(loading / total) * 100;
          }
             console.log(fileReader.readyState);
  //未读取         fileReader.readAsDataURL(file)        }
else{
             alert("您的浏览器不支持FileReader");
        }
    }
    function base64ConvertToBlob(picData, type, size) {
                type = type || "";
                size = size || 512;
                var decodeFileData = atob(picData);
      //此处用atob解码，转码函数btoa。在使用方法时注意操作中文时，需对中文decodeURIComponent转换            var dataArray = [];
                var len = decodeFileData.length;
                for (var i = 0;
     i  len;
 i += size) {
                    var pieceData = decodeFileData.slice(i, i + size);
       //这里做了一个512的分组                var arr = new Array(pieceData.length);
                    for (var j = 0;
     j  pieceData.length;
 j++) {
                    arr[j] = pieceData.charCodeAt(j)                }
                    var u8a = new Uint8Array(arr);
                dataArray.push(u8a)            }
            return new Blob(dataArray, {
type: type}
)    }
    function compressPic(picData,callBack) {
            var img=new Image();
        img.onload = function(){
             var width = img.width;
             var height = img.height;
             var standard=800;
      //以800为基准压缩         if (width >
     standard || height >
 standard) {
                 var rate = Math.max(width / standard, height / standard);
                 width /= rate;
             height /= rate         }
          var canvas = document.createElement("canvas");
             canvas.width = width;
             canvas.height = height;
             var context = canvas.getContext("2d");
             context.fillRect(0, 0, canvas.width, canvas.height);
             context.drawImage(img, 0, 0, width, height);
             var data = canvas.toDataURL("image/jpeg", 1);
             //var blobData=base64ConvertToBlob(data.replace(/^.*?,/, ""), "image/jpeg")  //-----需要去掉符号，不然使用atob方法报错         //doAjax(new FormData().append('image',data));
       //后续可以这样做，转换成Blob字段，组装FormData，发送至后台         console.log("the after canvas compress size : " + data.length);
         callBack(data)        }
    ;
            img.src=picData;
            console.log("the before canvas conpress size : "+picData.length);
    }
 $("#uploadPic input").change(function() {
     var file=this.files[0];
 upload(file, function(picData){
                 $("#uploadPic img")[0].src = picData;
    //预览            }
            );
    }
    );
    /script>
    /html>
    

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

推荐阅读：

JS中特性与UA检测

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

以上就是如何使用H5做出上传图片功能的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！