•  

html选择图片后直接预览

2017-12-07

我们经常需要做上传功能,但在上传之前可能想要预览一下,很多人的做法是先把图片直接上传到服务器上,然后再加载出来预览,其实我们选择了图片后,是可以直接预览的。

如下图


通过地址,我们可以看到,我们选择了一个图片,选择后,图片直接在浏览器查看了。


全部源码就是这样

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$(".file").change(function(){
			var fileImg = $(".fileImg");
			var explorer = navigator.userAgent;
			var imgSrc = $(this)[0].value;
			if (explorer.indexOf('MSIE') >= 0) {
				if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
					imgSrc = "";
					fileImg.attr("src","/img/default.png");
					return false;
				}else{
					fileImg.attr("src",imgSrc);
				}
			}else{
				if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
					imgSrc = "";
					fileImg.attr("src","/img/default.png");
					return false;
				}else{
					var file = $(this)[0].files[0];
					var url = URL.createObjectURL(file);
					fileImg.attr("src",url);
				}
			}
		})
	})
	</script>
</head>
<body>
	<form enctype="multipart/form-date" method="post">
		<input type="file" class="file">
		<input type="submit" class="sub">
	</form>
	<img src="" class="fileImg">
</body>
</html>


你也可以直接下载例子去测试。


进入下载界面
申明:本文受法律保护,未经作者同意不得用于商业用途,如转载请说明出处!
评论