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 转 二进制文件
/**
* dataURL to blob, ref to https://gist.github.com/fupslot/5015897
* @param dataURI
* @returns {Blob}
*/
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);
});
更新
URL.createObjectURL 🐂 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
业务有个需求,要做图片预览上传,过去都是客户端上传给后端,后端返回
url
前端进行预览,现在其实可以不依赖后端做预览,最后在上传,这主要依赖FileReader
和FormData
这两个对象和 JavaScript 处理二进制的能力。OK,Show code~,以下代码已注释掉具体业务逻辑和实现,如果需要了解 API 细节,可以请参考:
监听表单文件变化
文件表单的样式主要通过让它后面,通过别的DOM来美化它。
预览
预览使用
FileReader
对象来读:提交图片文件(二进制文件 非 base64)
base64 转 二进制文件
构造
FormData
填充二进制文件数据,通过ajax
的方式进行提交:注意:不要漏了指定
processData
和contentType
为false
。压缩
业务中不需要前端不需要压缩,因为后端有更靠谱的压缩方案,但是前端其实也可以压缩,那就是用
canvas
把图画出适合的大小,然后上传。主要流程:
new
出来的Image
对象,我们监听它的onload
事件canvas
,尺寸设置成上一步骤算出来的压缩后的图片尺寸drawImage
方法,把图片绘制到canvas
中canvas
的toDataURL
,取出base64
格式的数据自己的
OneWord
客户端的上传组件就是这么做的:ow-image-uploader.vue这样一看,好像除去业务逻辑的话,好像也没多少代码
PS:需要注意的是,通过
canvas
绘制的图片,低版本iOS
会出现比例不正确的情况,请参考 https://github.com/stomita/ios-imagefile-megapixel