利用FileReader和FormData实现图片预览和上传(base64转二进制文件)

业务有个需求,要做图片预览上传,过去都是客户端上传给后端,后端返回 url 前端进行预览,现在其实可以不依赖后端做预览,最后在上传,这主要依赖 FileReader 和 FormData 这两个对象和 JavaScript 处理二进制的能力。

<input type="file">
input.on.('change', preview);

预览

预览使用 FileReader 对象来读:

function preview(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.onloadend = function () {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var dataURL = reader.result;
        var img = new Image();
        img.src = dataURL;
        // 插入到 DOM 中预览
        // ...
    };

    reader.readAsDataURL(file); // 读出 base64

}

提交图片文件(二进制文件 非 base64)

base64 转 二进制文件

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

构造 FormData 填充二进制文件数据,通过 ajax 的方式进行提交:

var fd = new FormData();
var blob = dataURItoBlob(dataURL);
fd.append('file', blob);


$.ajax({
    type: 'POST',
    url: '/upload',
    data: fd,
    processData: false, // 不会将 data 参数序列化字符串
    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log('进度', percentComplete);
            }
        }, false);

        return xhr;
    }
}).success(function (res) {
    // 拿到提交的结果
}).error(function (err) {
    console.error(err);
});

注意

不要漏了指定 processData 和 contentType 为 false 。

压缩

业务中不需要前端不需要压缩,因为后端有更靠谱的压缩方案,但是前端其实也可以压缩,那就是用 canvas 把图画出适合的大小,然后上传。

主要流程:

  • 在 new 出来的 Image 对象,我们监听它的 onload 事件
  • 按照压缩比例,算出压缩后的图片尺寸
  • 创建 canvas ,尺寸设置成上一步骤算出来的压缩后的图片尺寸
  • 调用 drawImage 方法,把图片绘制到 canvas 中
  • 调用 canvas 的 toDataURL ,取出 base64 格式的数据
  • 后续的传图步骤和上面的原图上传一样
var img = new Image();

img.onload = function () {
    // 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
    // 压缩质量可以根据实际情况调整
    var w = Math.min(400, img.width);
    var h = img.height * (w / img.width);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    // 设置 canvas 的宽度和高度
    canvas.width = w;
    canvas.height = h;

    // 把图片绘制到 canvas 中
    ctx.drawImage(img, 0, 0, w, h);

    // 取出 base64 格式数据
    var dataURL = canvas.toDataURL('image/png');

    // ...
};

img.src = reader.result;

转自:http://blog.csdn.net/hsany330/article/details/52575459

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » 利用FileReader和FormData实现图片预览和上传(base64转二进制文件)

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注