浏览器上传图片实时预览

    因为浏览器在显示本地路径的图片时有安全漏洞，所以我们已经无法利用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>