Html5图片预览

最新推荐文章于 2024-07-29 15:03:08 发布

qq_16239775

最新推荐文章于 2024-07-29 15:03:08 发布

阅读量2.7k

点赞数

分类专栏： html 文章标签： html5 网页图片预览

本文链接：https://blog.csdn.net/qq_16239775/article/details/79424204

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

HTML5的 File API允许浏览器访问本地文件系统，借助它我们可以实现以前无法实现的本地图片预览功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片预览</title>
	</head>
	<body>
	<input type='file' multiple  /><br/>
	<img />
	<script>
	document.querySelector("input").onchange = function() {
	  var files = this.files;
	  document.querySelector("img").src = window.URL.createObjectURL(files[0]);
	  files.slice()
	}
	</script>
	
	</body>
</html>