Html5實現末上傳圖片即可預覽

2015/03/31 33908

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!DOCTYPE html>
<html>
	<head>
	<title>Image preview on realtime</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
	
	<h3>即時預覽Image</h3>
	<form name="form0" id="form0" >
		<input type="file" name="file0" id="file0" multiple="multiple" /><br>
		<img src="" id="img0" >
	</form>

	<script>	
	/**
 	 * 使用HTML5 File API, 來即時預覽image
 	 */
	$("#file0").change(function(){
		var objUrl = getObjectURL(this.files[0]) ;
		console.log("objUrl = "+objUrl) ;
		if (objUrl) {
			$("#img0").attr("src", objUrl) ;
		}
	}) ;
	
	/**
	 * 建立一個可存取到該file的url
	 * PS: 瀏覽器必須支援HTML5 File API
	 */
	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>
</body>
</html>