上传图片，显示预览

最新推荐文章于 2021-06-29 11:27:24 发布

原创最新推荐文章于 2021-06-29 11:27:24 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种利用JavaScript实现图片上传预览的方法。通过监听文件输入改变事件，使用FileReader API读取用户选择的图片文件，并将其显示在网页上。

上传图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<input type="file" id="file_input">

<img src="" class="img" />
</body>
<script type="text/javascript">
$("input[type='file']").change(function(){
var file = this.files[0];
if (window.FileReader) {    
		var reader = new FileReader();    
		reader.readAsDataURL(file);    
		//监听文件读取结束后事件    
	  reader.onloadend = function (e) {
		$(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
		};    
   }
});
</script>
</html>