方法一：window.URL.createObjectURL 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="file" id="file">
<img src="" id="img">
<script>
var fileEle = document.getElementById('file');
var imgEle = document.getElementById('img');
fileEle.onchange = function(e) {
var file1 = e.target.files[0];
var url1 = window.URL.createObjectURL(file1);
imgEle.src = url1;
}
</script>
</body>
</html>
-
window.URL.createObjectURL方法存入一个input[type=file]返回的File对象，返回一个存在内存中的url，同域的img标签可以访问到该url; -
在关闭页面时，浏览器会自动释放图片地址中的内存，但同一页面多次调用
会造成内存占用过多，可以主动调用window.URL.revokeObjectURL(url1)释放图片资源，释放后通过src请求图片会返回404； -
该方法不只是允许访问图片，也可以访问到任何文件，只是其他类型文件无法预览；
方法二：FileReader 类
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="file" id="file">
<img src="" id="img" width="300">
<script>
var fileEle = document.getElementById('file');
var imgEle = document.getElementById('img');
fileEle.onchange = function(e) {
var file1 = e.target.files[0];
var reader = new FileReader;
var url2 = reader.readAsDataURL(file1);
reader.onload = function() {
imgEle.src = reader.result
}
}
</script>
</body>
</html>
-
FileReader的readAsDataURL方法将文件以base64格式读出到页面中，如果文件太大，过程是耗费时间的，可以通过reader.onprogress事件监听读取过程； - 如果仅仅为了预览图片而把整个文件读取到页面中，是挺浪费时间和资源的，所以
FileReader主要是用于你想在页面中加工图片或文件时使用的； -
FileReader类还有很多方法和事件，足以另开一篇博文，关于FileReader的详细讨论可以自己 Google；
网友评论