1
2
3
4
5
6
<div class="fixed">
    <a href="javascript:;" class="file" id="localImag">
        <input type="file" id="file">
        <img src="http://www.jq22.com/img/cs/500x500-2.png" id="preImg">
    </a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function() {
    //获取页面的input标签和接受展示的图片标签
    var file = document.getElementById("file");
    var preImg = document.getElementById("preImg");
    //      !window.FileReader&&return false;
    //给input绑定change事件
    file.onchange = function() {
        if (window.FileReader) {
            //创建FileReader对象
            var reader = new FileReader();
            //接受files数组中的第一个参数
            var _file = this.files[0];
            //将文件格式转换
            reader.readAsDataURL(_file);
            //读取完毕后设置图片展示
            reader.onload = function() {
                preImg.setAttribute('src', this.result);
            }
        } else {
            alert("当前浏览器不支持FileReader，请更新浏览器！");
        }
    }
})()
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX