jquery实现获取本地图片并展示

一.html页面保留按钮和隐藏的img标签

<div>
	选择图片:
	<input type="file" id="file" name="file" capture="camera" accept="image/jpeg,image/png,image/jpeg,image/gif">
	<div id="result" align="center">
		<div id="imgDiv" style="display: none;">
			<img id="img" style="height: 300px;width: 250px;margin-left: 10%;"/>
		</div>
	</div>
</div>

二.jquery设置file改变函数

$("#file").change(function(event){
	var files = event.target.files, file;
	if (files && files.length > 0) {
        // 获取目前上传的文件
	    file = files[0];// 文件大小校验的动作
	    if(file.size > 1024 * 1024 * 2) {
		     alert('图片大小不能超过 2MB!');
		     return false;
	    }
	    // 获取 window 的 URL 工具
	    var URL = window.URL || window.webkitURL;
	    // 通过 file 生成目标 url  获取真实的路径
	    var imgURL = URL.createObjectURL(file);
	    //用attr将img的src属性改成获得的url
	    $("#img").attr("src",imgURL);
	    $("#imgDiv").show();
	    // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
	    // URL.revokeObjectURL(imgURL);
	    }
});

三.测试