Javascript实现在线预览图片方法

Mar 30 2018

Javascript实现在线预览图片方法

Battle

分类：Javascript 文章评论

0条评论

已被围观 2496 次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端js在线预览</title>
</head>
<body>
<img src="" alt="" style="width:80px;height:100px"><input type="file" class="files">
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(".files").change(function() {
	var objUrl = getObjectURL(this.files[0]);
	console.log(objUrl);
	if (objUrl) {
		$(this).prev('img').attr("src", objUrl);
	}
});
//建立一個可存取到該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>
</body>
</html>