<!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屬性存儲流讀取的數(shù)據(jù)
????????????????????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>
