html预览手机本地图片

最新推荐文章于 2024-04-10 17:21:57 发布

hym2111

最新推荐文章于 2024-04-10 17:21:57 发布

阅读量3.4k

点赞数

分类专栏： java web

本文链接：https://blog.csdn.net/hym2111/article/details/50540888

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
.file_div1{
		width:33%;
		background-position:center;
		background-repeat:no-repeat;
		position:relative;
		float:left;
		margin-left:0.3%
		
	}
	.file_img{
		width:100%;height:100%;
	
	}
	input{
		width:100%;height:100%;
		float:left;
		position:absolute;
		left:0px;
		top:0px;
		background:#ff0000;
		opacity:0;
		
	}
	.pic_container{
		margin-top:20px;
		padding-bottom:20px;
	}
</style>
<script type="text/javascript">  
function preImg(sourceId, targetId) {  
    if (typeof FileReader === 'undefined') {  
        alert('Your browser does not support FileReader...');  
        return;  
    }  
    var reader = new FileReader();  
  
    reader.onload = function(e) {  
        var img = document.getElementById(targetId);  
        img.src = this.result;  
    }  
    reader.readAsDataURL(document.getElementById(sourceId).files[0]);  
}  
</script>  
</head>  
<body>  
<form action="">  
    <div class="file_div1"> <img class="file_img" src="image/cover.png" id="pic_1"/>
    <input type="file" capture="camera" accept="image/*" id="cameraInput1" name="cameraInput" οnchange="preImg(this.id,'pic_1');">
  </div> 
</form>  
</body>  
</html>

hym2111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html预览手机本地图片

.file_div1{ width:33%; background-position:center; background-repeat:no-repeat; position:relative; float:left; margin-left:0.3% } .file_img{ width:100%;height:100%; } input{ w
复制链接

扫一扫