JQuery实现动态显示加载的图片

码农桃子

已于 2023-04-11 00:19:27 修改

阅读量9.4k

点赞数 2

分类专栏：前端文章标签： HTML 动态 jquery

于 2018-12-03 08:45:25 首次发布

本文链接：https://blog.csdn.net/qq727338622/article/details/84744726

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

描述

想在图片上传的时候，动态显示一下自己选择的图片，但是无奈浏览器总是出现这个地址，看网上的帖子，据说：浏览器出于安全考虑，客户端的真实文件路径通过代码是无法获取的，从而通过fakepath直接代替了其中的路径名，保护隐私和安全。
在这里插入图片描述

解决方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<script type="text/javascript"   src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function () {
		/* 重点是这个位置 */
		$("#myfile").change(function() {
			/*在改变照片时，清空以前图片*/
			$("#img").empty();
			var oFReader = new FileReader();
		    var file = document.getElementById('myfile').files[0];
		    oFReader.readAsDataURL(file);
		    oFReader.onloadend = function(oFRevent){
		        var src = oFRevent.target.result;
		        $("#img").append("<img src=\""+src+"\">");
		    }
		});
	})
	
</script>
</head>
<body>
	
	<form action="upload.do" enctype="multipart/form-data" method="post">
		<input type="file" name="myfile" id="myfile">
		<button>上传</button>
	</form>
	<!-- 要显示上传的图片 -->
	<div id="img"></div>
	
</body>
</html>