<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,minimal-ui">
<title>添加图片</title>
<style>
*{
margin:0;
padding:0;
}
.fxm_left a{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.fxm_right{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.fxm_right img{
width: 5vmin;
height: 5vmin;
}
.main textarea{
width: 96%;
height: 66vmin;
border:0;
padding: 2vmin;
line-height: 5vmin;
outline: none;
}
.photos{
width: 90%;
margin:0 auto;
margin-top: 1vmin;
min-height: 1vmin;
clear: both;
overflow: hidden;
}
.photos p{
font-size: 3.6vmin;
line-height: 8vmin;
}
.addPho{
width: 100%;
}
.addPho #imgDiv{
float: left;
}
.iptBox{
width: 27vmin;
height: 27vmin;
background: #ccc;
background-position: center;
background-size: cover;
float: left;
display: inline-block;
}
#Img{
width: 27vmin;
height: 27vmin;
margin-right: 3vmin;
margin-bottom: 3vmin;
float: left;
}
#file{
width: 27vmin;
height: 27vmin;
opacity: 0;
}
</style>
</head>
<body style="background: #F1F1F1;">
<div class="main">
<textarea placeholder="与家人分享新鲜事"></textarea>
<div class="photos">
<p>添加图片</p>
<div class="addPho">
<div class="picDiv">
<div id="imgDiv"><div class="iptBox"><input type="file" id="file" accept="image/*" capture='camera' multiple="multiple" onchange="read()"/></div></div>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//可以选择多个文件加载在页面
function read(){
var file = document.getElementById("file");
var imgDiv = document.getElementById("imgDiv");
var iptbox = $('.iptBox')
for(var i=0;i<file.files.length;i++){
let reader = new FileReader();
var file1 = file.files[i];
reader.readAsDataURL (file1);
reader.onload = function (result) {
//reader对象的result属性存储流读取的数据
iptbox.before('<img id="Img" src="' + reader.result + '" alt=""/>')
var llength = $('#imgDiv').find('img').length
console.log(llength)
if(llength == 9){
$('.iptBox').css({
'display':'none'
})
}
}
}
}
</script>
</html>
</body>
