图片上传前预览 HTML5实现图片上传预览

最新推荐文章于 2021-05-30 20:16:41 发布

Tonvchong

最新推荐文章于 2021-05-30 20:16:41 发布

阅读量1.7k

点赞数

分类专栏：开源问题处理 Jquery Html

问题处理同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

开源

24 篇文章 0 订阅

订阅专栏

Html

13 篇文章 0 订阅

订阅专栏

<!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>

from 开源中国社区