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

描述

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

解决方法:


<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("+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>

你可能感兴趣的:(html+css+JQuery)