读取文件转为url有两种方式,一是FileReader -base64格式,二是URL.createObjectURL - blob格式,后者要比前者短很多很多,使用FileReader读取多张照片文件赋值给img后,安卓的微信明显会有感到卡顿,将整个DOM结构复制到vscode编辑器一看,编辑器也吃不消了,这样看来后者性能要好一些。兼容性问题看公司需求吧,主流的设备貌似没什么异常。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<title>测试..</title>
</head>
<body>
<div style="width:1000px;margin:20px auto;" id="show-box">
<input type="file" name="" id="upload-ipt">
<div class="img-wrap">
<img alt="" class="img">
</div>
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
<script>
'use strict'
$("#upload-ipt").on("change", function (e) {
//previewFile()
previewFile2()
})
function previewFile() { //new FileReader
var preview = document.querySelector('.img');
var file = document.querySelector('input[type=file]').files[0];
console.log("file", file)
var reader = new FileReader();
reader.addEventListener("load", function (e) {
preview.src = reader.result;
console.log(dataURLtoBlob(reader.result))
//等同于e.target.result == e.currentTarget.result == e.srcElement.result
}, false);
if (file && file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
} else {
console.log("请上传一图片文件")
}
}
function previewFile2() { //URL.createObjectURL
var preview = document.querySelector('.img');
var file = document.querySelector('input[type=file]').files[0];
var blob = new Blob([file]);
var url = (window.URL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
if (file && file.type.indexOf("image") == 0) {
preview.src = url;
preview.onload = function () {
(window.URL) ? window.URL.revokeObjectURL(url): window.webkitURL.revokeObjectURL(url)
}
} else {
console.log("请上传一图片文件")
}
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {
type: mime
});
var url = URL.createObjectURL(blob);
return url
}
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('#browse').files;
function readAndPreview(file) {
// 确保 `file.name` 符合我们要求的扩展名
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
/* var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file); */
var blob = new Blob([file]);
var url = (window.URL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = url;
preview.appendChild(image);
image.onload = function () {
(window.URL) ? window.URL.revokeObjectURL(url): window.webkitURL.revokeObjectURL(url)
}
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
</script>
</body>
</html>