上传图片H5 ReaderFile API 并将转成base64

HTML5有个功能就可以将图片转换base64，那就是FileReader。
同时我们也需要对图片大小执行限制和压缩,以达到最优状态上传到服务器

顺便说下这个上传的主要逻辑：
·用input标签并选择type=file，记得带上multiple，不然就只能单选图片了
·绑定好input的change时间，
·重点就是如何处理这个change事件了，使用H5新的FileReader接口读取文件并打成base64编码，之后的事就是与后端同学交互着玩啦

html

<input type="buttom" id="baseImg">

限制上传图片的格式

JS

在js方面我们进行组件的开发，也可以方便拿来就用。

$('#baseImg').bind('click tap',function(){
    new Upload({
        current:$(this)
        callback:function(){
            //自己的业务逻辑
        }
    })
})

js组件中

引入jquery.js
//定义入参
var Upload = function(config){
    var newConfig = $.extend({},Upload.defualts,config);
    this.init(newConfig)
}
Upload.defaults = {
    imgOption:{
        width:'',
        height:'',
        quality:''
    }
    current:'',
    callBack:''
}
Upload.prototype = {
    init:function(param){
        var self = this,
            _imgOption = param.imgOption,
            _current = param.current,
            _callBack = param.callBack;
        if( typeof FileReader == 'underfined' ){
            alert('该浏览器不值FileReader');
            return;
        }else if(navigator.userAgent.indexOf('MSIE 9.0') != -1 || navigator.userAgent.indexOf('MSIE 8.0') != -1){
            alert('IE9 IE8不支持base64上传');
            return;
        }
        self.del(param) //删除图片
        $('#changeFile').remove(); 
        //删除放在前面 删除上一个的 不然某些浏览器会出现没上传完 就删除了input 这个导致整个都失败了
        $(class).before('<input type="file" id="changeFile" name="file" accept="image/bmp,image/jpg,image/png"  style="display:none"/>');
        //通过click来触发input 就出现了浏览器选择框 但input始终都是隐藏的
        $('#changeFile').click();
        $('#changFile').bind('input protetychange,input'),function(){
            changeImg(this)
        })
        function changImg(e){
            if(!e.length.length)return;
            var file = e.files[0];
                reader = new FileReader();
            reader.readAsDateURL(file);
        reader.onload = function(){
                var result = this.result,
                    img = new Image();
                img.src = result;
                getImgOption(img)               
            }
        }
        function getImgOption(img){
            self.compress(img,_imgOption,function(base64){
               //base64 就是转成的base64 这里写你在组件中的的业务逻辑
               // console.log("压缩前：" + result.length / 1024 + "  " );
               // console.log("压缩后：" + base64.length / 1024 + "  " );
               //组件外的函数
               if (_callBack) {
                      _callBack()
               }
            })
        } 
    },
    compress:function(img,obj){
        img.onload = function(){
            var self = this;
            base64,imgSize = img.src.length/1024,
            w = self.width,h = self.height, //显示屏           scale = w / h,
            quality,//图片质量
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext(2d),
            anw = document.createAttribute('width'),
            anh = document.createAttrabute('height');
            w = obj.width || w;
            h = obj.height || (w / scale);
            anw.nodeVaule = w;
            anh.ondeVaule = h;
            canvas.setAttrbuteNode(anw);
            cnavas.setAttrbuteNode(anh);
            if( obj.quality == '' ){
                if (imgSize < 50) {
                    _deal = false;
                } else if (imgSize < 100 && imgSize > 50) {
                    obj.quality = 0.9;
                } else if (imgSize < 500 && imgSize > 100) {
                    obj.quality = 0.8
                } else if (imgSize < 1000 && imgSize > 500) {
                    obj.quality = 0.7
                } else if (imgSize < 1000 && imgSize > 2000) {
                    obj.quality = 0.5
                } else {
                    obj.quality = 0.4
                }
            }
            quality = obj.quality;
            base64 = canvas.toDateURL('image/jpeg',quality)
            callback(base64);
        }
            
    },
    del:function(){
        var self = this;
        //业务上的删除图片的逻辑 
    },  
       
}；
return Upload;

Date: 2017-02-16