1，通过window.URL.createObjectURL
2，通过FileReader()读取文件
<htmL>
<body>
<input type="file" value="方式一" onchange="preview(this)">
<img id="previewimg" style="width:200px"/>
<input type="file" value="方是二" onchange="preview2(this)">
<div id="">
</div>
</body>
<script>
//把二进制对象读成浏览器能够识别的对象;
//Safari竟然不支持URL.createObjectURL()方法,Chrome支持
function preview(obj) {
var file = obj.files[0];//获取文件
var size = file.size;
console.log(size);
if (size / 1024 > 1024 * 2) {
alert("请不要上传超过2m得头像");
return;
}
var img = document.getElementById("previewimg");
img.src = window.URL.createObjectURL(file);
}
function preview2(obj) {
var file = obj.files[0];//获取文件
var size = file.size;
var fr = new FileReader();
fr.onload = function(file){
var img = document.getElementById("previewimg");
img.src = file.target.result;
}
fr.readAsDataURL(file);
}
</script>
</html>