使用blob来做上传图片预览

最新推荐文章于 2024-05-31 15:00:13 发布

原创最新推荐文章于 2024-05-31 15:00:13 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML和jQuery实现文件上传并实时预览图片的方法。通过监听文件输入框的改变事件，利用File API读取选择的图片文件，并将其显示在页面上，实现了即时预览的效果。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<div>
 <img style="width: 200px;height:200px;border-radius: 100%"  src="https://img2018.cnblogs.com/blog/1195302/201811/1195302-20181128163006342-890300325.jpg"/>
</div>


<input type="file"  id="input"/ >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$("input").change(function(){

	var files = document.getElementById('input').files  


	$("img").attr("src", window.URL.createObjectURL(files[0]));

});

</script>
</body>
</html>