html代码演示
<div id="div">
<input type="file" id="photoFile" style="display: none;" >
<img id="preview_photo" src="/" width="200px" height="200px" onclick="uploadPhoto()">
</div>
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();
}