<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<p>第一种：</p>
<input id="test" type="file">
<br><br><br><br><br>
<p>第二种：</p>
<input id="test2" type="file">
<img id="preview">
<script>
(function(doc) {
'use strict';
// 第一种方法
doc.getElementById("test").addEventListener("change", function() {
console.time("userTime");
var img = new Image();
// 图片加载完成，释放路径
img.onload = function() {
window.URL.revokeObjectURL(this.src);
console.timeEnd("userTime");
}
// 显示图片
doc.getElementById("preview").src = img.src = window.URL.createObjectURL(this.files[0]);
});
// 第二种
doc.getElementById("test2").addEventListener("change", function() {
console.time("userTime");
var fileReader = new FileReader();
// 读取完成
fileReader.onload = function() {
doc.getElementById("preview").src = this.result;
console.timeEnd("userTime");
}
// 读取图片
fileReader.readAsDataURL(this.files[0]);
});
})(document);
</script>
</body>
</html>
图片上传 h5预览图片
猜你喜欢
转载自timelessmemory.iteye.com/blog/2317797
今日推荐
周排行