因为浏览器在显示本地路径的图片时有安全漏洞,所以我们已经无法利用img标签的直接显示本地路径下的图片,需要通过"FileReader"和"input:file"标签来完成。
FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据。FileReader提供了如下几个方法:
readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选。
readAsDataURL(file):读取文件并将文件以数据URL的形式保存在result属性中。
readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一个字节。
readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。
具体预览图片的方法:
//html代码
<div>
<img src="" id="imgOfHead">
<input type="file" id="userphoto" onclick="showPhoto()">
</div>
//javascript代码
<script>
var input = document.getElementById("userphoto");
//检测浏览器是否支持FileReader
if (typeof (FileReader) === 'undefined') {
result.innerHTML = "浏览器不支持FileReader,请更换浏览器!";
input.setAttribute('disabled', 'disabled');
} else {
//开启监听
input.addEventListener('change', readFile, false);
}
function showPhoto() {
var file = this.files[0];
//限定上传文件的类型,判断是否是图片类型
if (!/image\/\w+/.test(file.type)) {
alert("只能选择图片");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
base64Code=this.result;
//把得到的base64赋值到img标签显示
$("#imgOfHead").attr("src",base64Code);
}
}
</script>