【多城市分站系统源码】
【自适应】响应式高端家
【多城市分站系统源码】
【手机端】影视传媒文化
<style>
.file-input{
line-height:30px;
position:relative;
margin-top:10px;
}
.file-input .input-container{
width:100px;
height:30px;
text-align:center;
background:#3879d9;
color:#fff;
border-radius:3px;
}
.file-input input{
position:absolute;
left:0;
top:0;
opacity:0;
}
.file-input #name{
position:absolute;
left:100px;
top:0;
font-size:12px;
color:#666;
}
</style>
HTML代码
<input type="file" id="default" accept="image/*" multiple>
<div class="file-input">
<p class="input-container">
上传图片
<input type="file" id="upload" accept="image/*" multiple>
</p>
<span id="name"></span>
</div>
有需要判断可以加入JS代码
var upload=document.getElementById('upload');
var nameContainer=document.getElementById('name');
upload.onchange=function(){
var name=[];
for(var i=0;i<this.files.length;i++){
name[i]= this.files[i].name;
if(this.files[i].size>=307200){
alert("文件"+this.files[i].name+"过大，不能超过300kb")
}
}
nameContainer.innerHTML=name;
}