功能:
1.上传多个文件
2.获取文件名
3.显示在右边文本框中
4.带有删除功能
在这里插入代码片
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.rit{
width:1000px;
height:35px;
/* background-color:#eeeeee;*/
margin-left:100px;
margin-top:4px;
text-align: center;
}
.lft {
height: 30px;
width: 80px;
background-color: cornflowerblue;
font-size: 14px;
line-height: 30px;
cursor: pointer;
display: inline-block;
text-align: center;
color: #fff;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="row cl">
<div class="upload" style="margin-top: 80px">
<div class="lft" style="float:left;margin-left: 50px;">
<button class="load" "document.getElementById('project_name').click()">选择文件</button>
<input type="file" id="project_name" multiple style="display: none" "showFiles(this)">
</div>
<div id="con" class="rit"></div>
</div>
</div>
<script>
/*显示文件名在另一控件*/
var uploadfiles=new Array();
function showFiles(o) {
var e=window.event;
console.log(e);
var files=e.target.files;
if(files.length>0){
for(var i=0;i<files.length;i++){
uploadfiles.push(files[i]);
}
}
refreshDiv();
}
function refreshDiv() {
var condiv=document.getElementById("con");
con.innerHTML="";
for(var i=0;i<uploadfiles.length;i++){
var div=document.createElement("div");
div.style="display:in-line";
var span=document.createElement("span");
span.innerHTML=uploadfiles[i].name;
span.style.color="black";
var bt=document.createElement("button");
bt.innerHTML="X";
bt.style.color="red";
bt.style.background="transparent";
bt.style.margin="0 10px";
bt.dataId=i;
bt.function () {
console.log(this.dataId);
uploadfiles.splice(this.dataId,1);
refreshDiv();
}
condiv.appendChild(span);
condiv.appendChild(bt);
}
}
</script>
</body>
</html>