上传照片预览js

最新推荐文章于 2024-04-11 14:42:15 发布

TCancel

最新推荐文章于 2024-04-11 14:42:15 发布

阅读量319

点赞数

分类专栏： html 文章标签： javascript 图片视频上传预览

本文链接：https://blog.csdn.net/u014362204/article/details/75500862

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<div class="panel-heading">
    <label>上传封面图片</label><br />
    <img src="" id="img0" style="width: 200px;height: 150px;">
    <input type="file" name="file0" id="file0" multiple="multiple" />
</div>

<script>	
$("#file0").change(function(){
	var objUrl = getObjectURL(this.files[0]) ;
	console.log("objUrl = "+objUrl) ;
	if (objUrl) {
		$("#img0").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>