File API

ES5 推出了一系列的 API:

• BLOB (二进制大对象)
• File (文件接口，基于 BLOB，但是增加了文件相关的方法，比如路径，大小)
• FileList (借助 <input type="file">，来获取硬盘文件的一个接口)
• FileReader
• URL

1 Simple APIs

// 第一步，获取 input

var fileInput = document.getElementById("myfile");

// 第二步，通过 input 获取 FileList

var fileList = fileInput.files;

// 第三步，通过 FileList 获取某个文件的对象

var file = fileList[];

// 简单来说，获取 File 对象就是:

file = document.getElementById('myfile').files[];

一个图片 <img src="" > 的 src 可以使下面三个之一:

1. 文件在操作系统中的路径
2. DataURL 数据，用 Base64 编码，将二进制文件进行加密的过程，然后就可以使用这字符串来表示二进制文件了
3. ObjectURL，它是我们需要使用的文件的一个引用字符串而已，格式为 blob:http://localhsot:8080/a3b05b0e-bd18-4b53-b6b8-0b345e9aebdb

2 Preview Demo

使用 ObjectURL:

myfile.onchange = function () {

    var imgUrl = URL.createObjectURL(myfile.files[]);

    myimg.src = imgUrl;

    myimg.onload = () => URL.revokeObjectURL(imgUrl);

};

3 Compress and Upload with AJAX

function shangchuantupian() {

    // 1. 获取图片的数据

    // 2. 校验大小，如果超过尺寸，那么对其进行压缩

    // 3. 加上你的水印

    // 4. 调用 ajax 方式，将其发送到服务器

    var canvas = document.createElement("canvas");

    var image = new Image();

    var imgUrl = URL.createObjectURL(myfile.files[]);

    image.src = imgUrl;

    image.onload = () => {

        URL.revokeObjectURL(imgUrl);

        canvas.width = image.width / ;

        canvas.height = image.height / ;

        var ctx = canvas.getContext('2d');

        ctx.drawImage(image, , , image.width / , image.height / );

        ctx.fillText("nf147", image.width /  - , image.height /  - );

        canvas.toBlob(function (b) {

            var fd = new FormData();

            fd.append("fff", b);

            fetch("/myupload", {

                method: 'post',

                body: fd

            }).then(resp => resp.body);

        }, "image/jpeg");

    };

}

4 Compress and Upload [version 2]

HTML:

<style>

 #myimg {

     border: 3px solid gray;

     border-radius: 5px;

     position: absolute;

     top: ;

     left: ;

 }

 #mymask {

     position: absolute;

     top: ;

     left: ;

 }

</style>

<div class="container">

    <div style="margin-top: 2em;">

        <input type="file" id="myfile" style="display: none"> <!-- 选择文件后，要预览 -->

        <button class="btn btn-primary" onclick="myfile.click()">选择图片</button>

        <button class="btn btn-primary" onclick="clickMe()">上传图片</button>

    </div>

    <div style="position: relative">

        <img src="" id="myimg" title="暂时没有上传" width="" height=""/>

        <canvas id="mymask" width="" height="">不支持canvas</canvas>

    </div>

</div>

JS:

var ctx;

myfile.onchange = () => { // 预览图片

    var imgUrl = URL.createObjectURL(event.target.files[]);

    myimg.src = imgUrl;

    myimg.onload = () => URL.revokeObjectURL(imgUrl);

};

function clickMe() {

    compressImgWithCanvas(myfile.files[], uploadWithAJAX);

    // uploadWithAJAX(myfile.files[0]);

}

/**

 * 压缩图片，然后执行某些任务

 */

function compressImgWithCanvas(blob, taskCallback) {

    console.log("bbb");

    var rat = ;

    var w = myimg.naturalWidth / rat, h = myimg.naturalHeight / rat;

    var canvas = document.createElement("canvas");

    canvas.width = w;

    canvas.height = h;

    var ctx = canvas.getContext('2d');

    ctx.drawImage(myimg, , , w, h);

    ctx.fillText("nf147", w - , h - );

    canvas.toBlob(taskCallback, "image/jpeg");

}

/**

 * 更新预览进度

 */

function refreshProgress(r) {

    if (!ctx) ctx = mymask.getContext('2d');

    ctx.save();

    ctx.clearRect(, , , );

    ctx.globalAlpha = 0.6;

    ctx.fillRect(, ( - r) * , , );

    ctx.globalAlpha = ;

    ctx.fillStyle = "white";

    ctx.font = "20px 微软雅黑";

    ctx.fillText(r *  + '%', , );

    ctx.restore();

}

/**

 * 通过 AJAX 上传 blob 类型的文件

 * @param blob

 */

function uploadWithAJAX(blob) {

    var fd = new FormData();

    fd.append("fff", blob);

    $.ajax({

        method: 'post',

        url: "/myupload",

        cache: false,

        contentType: false,

        data: fd,

        processData: false,

        xhr: () => {

            var xhr = $.ajaxSettings.xhr();

            xhr.upload.onprogress = (ev) => {

                refreshProgress(ev.loaded / ev.total);

            };

            return xhr;

        }

    }).done(console.log)

        .fail((xhr, staus, err) => console.error(xhr, staus, err));

}