html中图片上传预览功能

实现上传之前的文件预览功能img{width:400px;height:400px;margin:20px auto;cursor: pointer;border-radius: 50%;}$(function() {$("img").click(functio

不染心

1037人浏览 · 2017-08-10 16:05:32

不染心 · 2017-08-10 16:05:32 发布

实现上传之前的文件预览功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
			img{
			width:400px;
			height:400px;
			margin:20px auto;
			cursor: pointer;
			border-radius: 50%;
 		    }
	</style>
     <script type="text/javascript">
	   $(function() {
			$("img").click(function () {
				$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
					$("#upload").on("change",function(){
					var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
					//alert(objUrl);
					if (objUrl) {
					$("img").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
					}
					});
				});
			});
		 
		//建立一個可存取到該file的url
		function getObjectURL(file) {
		var url = null ;
		if (window.createObjectURL!=undefined) { // basic
		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>
	</head>
	<body>
		<img src="" >
 		<input id="upload" name="file" accept="image/*" type="file" />
	</body>
</html>