html,css,js,文件管理上传
Posted 我的博客笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html,css,js,文件管理上传相关的知识，希望对你有一定的参考价值。
实现效果如图：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>石健涛工作室</title>
<style>
.box{
width: 1000px;
margin: 100px auto;
text-align: center;
box-shadow:2px 2px 5px #000 ;
padding: 20px;
}
h1{
text-shadow: 1px 1px 2px #666;
}
a{
text-decoration: none;
background: #40c678;
color: #fff;
padding: 5px 8px;
box-shadow: 1px 1px 3px #000;
}
a:hover{
box-shadow: none;
}
ul{
list-style: none;
border-bottom: 1px solid #bab4b4;
}
li{
float: left;
}
ul:after{
clear: both;
content: "";
display: block;
}
ul:nth-child(odd){
background: #677677;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<h1>石健涛的云文件上传系统</h1>
<input type="file" id="files" onchange="fileup()" multiple style="display: none;" />
<a href="javascript:void(0);"onclick="fileChoice()">上传文件</a>
<div class="fileList" id="flist">
<ul>
<li style="width: 30%;">文件名</li>
<li style="width: 68%;">上传情况</li>
</ul>
</div>
<script type="text/javascript">
function fileChoice(){
document.getElementById("files").click();
}
function fileup(){
var files=document.getElementById("files").files;
var flist=document.getElementById("flist");
var html="";
for(var i=0;i<files.length;i++){
var file=files[i];
html+="<ul>"+
"<li style=\\"width:30%\\">"+file.name+"</li>"+
"<li style=\\"width:68%\\"><progress max=100 value=0 id=\'pro"+i+"\'></progress></li>"+
"</ul>";
dofileup(file,index);
}
flist.innerHTML+=html;
}
function dofileup(file,index){
var FormData=new FormData();
FormData.append(file.name,file);
创建ajax对象
var xhr=new XMLHttprequest();
xhr.open("post","fileup.do",true);
xhr.send(FormData);
}
</script>
</body>
</html>
以上是关于html,css,js,文件管理上传的主要内容，如果未能解决你的问题，请参考以下文章