HTML图片选择及回显_html中type=file的回显

html代码演示

	<div  id="div">
        <input type="file" id="photoFile" style="display: none;" >
        <img id="preview_photo" src="/" width="200px" height="200px" onclick="uploadPhoto()">
    </div>
1
2
3
4

jQuery 代码演示

	$("#photoFile").change(function(){
        // 先获取用户上传的文件对象
        var fileObj = this.files[0];
        // 生成一个文件读取的内置对象
        var fileReader = new FileReader();
        // 将文件对象传递给内置对象
        fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
        // 将读取出文件对象替换到img标签
        fileReader.onload = function(){  // 等待文件阅读器读取完毕再渲染图片
            $("#preview_photo").attr("src", fileReader.result);
           // $("#imgshow").html("<div style='border-width: 1px;border-style: solid;height: 102px;width: 72px;' align='center;'><img src='"+fileReader.result+"' style='width: 70px;height: 100px;' alt='center'></div>");
        }

    });

    function uploadPhoto() {
        $("#photoFile").click();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18