移动端图片转base64上传 --File API

需求：移动端上传图片要进行压缩控制大小
方法：利用File API处理文件

一、文件（File）接口介绍：

    File 对象是来自用户在元素上选择文件后返回的 Filelist 对象，也可以是自由拖放操作生成的

DateTransfer 对象，或者来自 HTMLCanvasElement上的 mozGetAsFile() API.

    File 对象是特殊类型的Blob，且可以用在任意的Blob类型的context中。比如：FileReader，

 URL.createObjectURL()，createImageBitmao()，及 XMLHttpRequest.send()都能处理Blob 和 File

File构造函数： File() - 返回一个新建文件对象（File）

File接口的属性：

    * File.lastModified - 返回当前File 对象所引用文件最后修改时间

    * File.lastModifiedDate - 返回当前File 对象所引用文件最后修改时间的Date对象

    * File.name - 返回当前对象所引用文件的名字

    * File.size - 返回所引用文件的名字

    * File.webkitRelativePath - 返回File相关的path或URL

    * File.type - 返回文件的类型

二、FileReader 对象介绍

        FileReader 对象允许web应用程序 异步读取 存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob

对象指定要读取的文件或数据。

     FileReader构造函数： FileReader() - 返回一个新构造的  FileReader

     FileReader属性：

            * FileReader.error - 一个 DOMException，标识在读取文件时发生的错误

            * FileReader.readyState - 表示 FileReader 状态的数字。取值如下：

                    EMPTY    —— 0 —— 还没有加载任何数据

                    LOADING—— 1 ——数据正在被加载

                    DONE  —— 2 —— 已完成全部的读取请求

            * FileReader.result - 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于用那个方法来启动读取操作

     FileReader事件处理：

            *  FileReader.onabort - 处理abort事件。该事件在读取操作被中断时触发

            * FileReader.onerror - 处理error事件。该事件在读取操作发生错误时触发

            * FileReader.onload - 处理load事件。该事件在读取操作完成时触发

            * FileReader.onloadstart - 处理loadstart事件。该事件在读取操作开始时触发

            * FileReader.onloadend - 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

            * FileReader.onprogress - 处理progress事件。该事件在读取 Blob 时触发

        **因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用

    FileReader方法：

            * FileReader.abort() - 中止读取操作。在返回时，readyState属性为DONE

            * FileReader.readAsArrayBuffer() - 开始读取指定的 Blob 中的内容，一旦完成，result 属性中保存的将是被读取文件的ArrayBuffer 数据对象

            * FileReader.readAsBinaryString() - 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所有读取文件的原始二进制数据

            * FileReader.readAsDataURL() - 开始读取指定的 Blob中的内容。一旦完成，result 属性中将包含一个data：URL格式的字符串以表示所读取文件的内容

            * FileReader.readAsText()  -  开始读取指定Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容

三、上传图片代码示例

/*上传照片*/
function imgbtn(obj) {
    //console.log(event.target.attr('id'));
    var self = this;
    var files = event.target.files;
    var type = files[0].type.split('/')[0];
    if (type != 'image') {
        layer.open({
            content:'请上传图片',
            style:'background-color:#fff;color:black;border:none;',
            time:2
        })
        return;
    }
    var size = Math.floor(file.size / 1024 / 1024);
    if (size > 3) {
        alert('图片大小不得超过3M');
        return;
    };
    for (var i = 0; i < files.length; i++) {
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);
        reader.onloadstart = function () {
            //用以在上传前加入一些事件或效果，如载入中...的动画效果
            layer.open({type:2})
        };
        reader.onloadend = function (e) {
            var dataURL = this.result;
            var imaged = new Image();
            imaged.src = dataURL;
            imaged.onload = function () {   //利用canvas对图片进行压缩
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var w = 0;
                var h = 0;
                if (this.width > this.height) {
                    h = 750;
                    var scale = this.width / this.height;
                    h = h > this.height ? this.height : h;
                    w = h * scale;
                }
                else {
                    w = 750;
                    var scale = this.width / this.height;
                    w = w > this.width ? this.width : w;
                    h = w / scale;
                }
                var anw = document.createAttribute("width");
                var anh = document.createAttribute("height");
                if (this.width > this.height) {
                    anw.value = h;
                    anh.value = w;
                }
                else {
                    anw.value = w;
                    anh.value = h;
                }
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);

                if (this.width > this.height) {
                    ctx.translate(h, 0);
                    ctx.rotate(90 * Math.PI / 180)
                    ctx.drawImage(this, 0, 0, w, h);
                    ctx.restore();
                }
                else {
                    ctx.drawImage(this, 0, 0, w, h);
                }
                dataURL = canvas.toDataURL('image/jpeg',0.7);
                //回调函数用以向数据库提交数据
                $.ajax({
                    type:'POST',
                    url:'upload/UploadPicture',
                    async: false,
                    data:{uploadtype:'y'},
                    dataType:'json',
                    success:function (res) {
                        layer.closeAll('loading');
                       //...
                    },
                    error:function (res) {
                        layer.closeAll('loading');
                        layer.open({
                            content:'网络异常，请检查你的网络',
                            style:'background-color:#fff;color:black;border:none;',
                            time:2
                        })
                    }
                })
            };
        };
    }
}