1.FileList-----文件列表
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>HTML File Api Demo01</title>
</head>
<body>
<header id="header">
<div class="container">
<h1>文件列表</h1>
<h5>File list</h5>
</div>
</header>
<div class="container">
<div class="row">
<form name="upload">
<input type="file" name="fileselect" multiple>
</form>
</div>
</div>
</body>
在浏览器控制台中输入以下命令可以得到FileList对象:
2.把选择的文件显示在页面上:
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML File Api Demo02</title>
</head>
<body>
<header id="header">
<div class="container">
<h1>文件列表</h1>
<h5>File list</h5>
</div>
</header>
<div class="container">
<div class="row">
<ul class="list-group clearfix"></ul>
<form name="upload">
<input type="file" name="fileselect" multiple>
</form>
<script>
(function(){
var listGroup = document.querySelector(".list-group"),
fileSelect = document.forms['upload']['fileselect'];
fileSelect.addEventListener('change',displayFileInfo,false);
function displayFileInfo(event){
var allFile = event.target.files;
for(var i=0;i<allFile.length;i++){
var li = document.createElement("li");
li.classList.add('list-group-item');
var node_content = document.createTextNode(
allFile[i].name+" "+
allFile[i].type+" "+
Math.round(allFile[i].size/1024/1024*100)/100+" "+"MB"+" "+
allFile[i].lastModifiedDate.toLocaleDateString()
);
li.appendChild(node_content);
listGroup.appendChild(li);
}
}
})()
</script>
</div>
</div>
</body>
</html>
3.拖放选择文件:
除了使用input选择框选择文件,Html5的File Api还允许我们使用拖拽的方式来选择文件。
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML File Api Demo02</title>
</head>
<body>
<header id="header">
<div class="container">
<h1>文件列表</h1>
<h5>File list</h5>
</div>
</header>
<div class="container">
<div class="row">
<ul class="list-group clearfix"></ul>
<form name="upload">
<a href="#" id="selectbtn" class="btn btn-primary">选择文件</a>
<span class="badge pull-right"></span>
<input type="file" name="fileselect" multiple style="display:none;">
</form>
<script>
(function(){
var listGroup = document.querySelector(".list-group"),
fileSelect = document.forms['upload']['fileselect'],
selectbtn = document.getElementById("selectbtn");
selectbtn.addEventListener('click',function(event){
fileSelect.click();
event.preventDefault();
},false);
fileSelect.addEventListener('change',displayFileInfo,false);
function displayFileInfo(event){
listGroup.innerHTML='';
event.stopPropagation();
event.preventDefault();
var allFile = event.target.files||event.dataTransfer.files;
document.querySelector('.badge').innerHTML=allFile.length;
for(var i=0;i<allFile.length;i++){
var li = document.createElement("li");
li.classList.add('list-group-item');
var node_content = document.createTextNode(
allFile[i].name+" "+
allFile[i].type+" "+
Math.round(allFile[i].size/1024/1024*100)/100+" "+"MB"+" "+
allFile[i].lastModifiedDate.toLocaleDateString()
);
li.appendChild(node_content);
listGroup.appendChild(li);
}
}
//拖放区域的提示文字
listGroup.innerHTML = '<p class="hint">请将要上传的文件拖放到这里</p>';
//监听drop和dragover事件
listGroup.addEventListener("drop",displayFileInfo,false);
listGroup.addEventListener("dragover",onDragOver,false);
function onDragOver(event){
event.stopPropagation();
event.preventDefault();
}
})()
</script>
</div>
</div>
</body>
</html>