码迷,mamicode.com
首页 > Web开发 > 详细

html,css,js,文件管理上传

时间:2018-07-25 23:11:13      阅读:631      评论:0      收藏:0      [点我收藏+]

标签:img   上传   val   formdata   工作   css   文件   echo   管理   

实现效果如图:

技术分享图片

实现代码如下:

<!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,文件管理上传

标签:img   上传   val   formdata   工作   css   文件   echo   管理   

原文地址:https://www.cnblogs.com/taoda/p/9368862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!