您的位置：首页 > Web前端 > HTML

html预览手机本地图片

2016-01-19 10:38 363 查看

<!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" onchange="preImg(this.id,'pic_1');">
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航