效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
textarea{
resize: none;
}
.btn{
outline: none;
padding: 8px 10px;
border: none;
cursor: pointer;
color: #fff;
border-radius: 4px;
}
.fr{
float: right;
}
.container{
width: 600px;
margin: 20px auto;
border:1px solid #ddd;
border-radius: 4px;
padding: 10px 12px;
}
.header{
position: relative;
}
.header_detail{
height: 40px;
}
.send{
background: blueviolet;
}
.view{
min-height: 100px;
border: 1px solid black;
padding: 10px 12px;
display: none;
}
.view .item{
display: inline-block;
margin-right: 19px;
margin-bottom: 5px;
}
.view img{
width:120px;
height: 120px;
}
.load{
display: inline-block;
width: 24px;
height: 24px;
overflow: hidden;
position: relative;
background:url(img/load.png) no-repeat;
background-size: 100% 100%;
}
.load input{
/*font-size: 100px;*/
position: absolute;
right: 0;
top: 0;
opacity: 0;
}
.list{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_detail">
<a href="javascript:;" class="load">
<input type="file" name="file" id="flie" />
</a>
<button class="btn fr send">发送</button>
</div>
<div class="view" id="view">
<!--<div class="item">
<img src="img/1.jpg" />
</div>-->
<!--<div class="item">
<img src="img/2.jpg" />
</div>
<div class="item">
<img src="img/3.jpg" />
</div>
<div class="item">
<img src="img/4.jpg" />
</div>
<div class="item">
<img src="img/5.jpg" />
</div>-->
</div>
</div>
</div>
<script>
var oFile = document.getElementById("flie")
var oView = document.getElementById("view")
var obj = {}
oFile.addEventListener("change",function(){
var fs = this.files[0]
var reader = new FileReader()
reader.onload = function(){
oView.style.display = "block"
if(!obj[this.result]){
var oImg = document.createElement("img")
var oDiv = document.createElement("div")
oDiv.className = "item"
oImg.src = this.result
oDiv.appendChild(oImg)
oView.appendChild(oDiv)
obj[this.result] = this.result
} else {
alert('不可以重复上传')
}
}
reader.onprogress = function(){
console.log("正在读取")
}
reader.readAsDataURL(fs)
})
</script>
</body>
</html>
谢谢大家----