画像H 5 Reader File APIをアップロードし、base 64に変換し、内蔵ブラウザでIE 1011へのアップロード機能の互換性を実現する

HTML 5には、画像をbase 64に変換する機能があります.それはFileReaderです.また、最適な状態でサーバにアップロードするには、画像サイズを制限して圧縮する必要があります.
ちなみにこのアップロードの主なロジックは、・inputタグでtype=fileを選択し、multipleを持っていくことを覚えておくと、画像をラジオするしかない・inputのchange時間をバインドする・ポイントは、このchangeイベントをどのように処理するか、H 5の新しいFileReaderインタフェースを使用してファイルを読み取りbase 64符号化し、その後のことはバックエンドの同級生とインタラクティブに遊ぶことです
html

アップロード画像のフォーマットを制限する
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('');
        //  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