HTML+JS上传图片进行预览_html4 图片上传预览-CSDN博客

本文链接：https://blog.csdn.net/weixin_43330884/article/details/103514555

对于普通的一般的是这样：
<input type="file" name="file" class="file_img" accept="image/*" />然鹅这并不能预览，难受的一批，只显示一个文件名，像这样
在这里插入图片描述
接下来的代码预览效果：

<!DOCTYPE html>
<html>
	<head>
		<title>HTML上传图片预览</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="../js/jQuery.js"></script>
		<style type="text/css">
			.inputfile {
				opacity: 0;
			}

			.lab {
				border-radius: 10px;
				background-color: #009F95;
				font-family: 楷体;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<h3>请选择图片文件：</h3>
		<form name="form" id="form">
			<input type="file" name="file" id="file" class="inputfile" accept="image/*" />
			<label for="file" class='lab'>点击上传图片</label><br /><br />
			<img src="" id="img" style="width: 1200px;height: 1000px;"><!-- 图片显示区域大小 -->
		</form>
		<script>
			$("#file").change(function() {
				var objUrl = getObjectURL(this.files[0]); //获取文件信息
				console.log("objUrl = " + objUrl);
				if (objUrl) {
					$("#img").attr("src", objUrl);
				}
			});

			function getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) {
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) { // mozilla(firefox)  
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) { // webkit or chrome  
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		</script>
	</body>
</html>