文件系统
提供客户端本地操作文件的可能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>文件系统API</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<form action="">
<!-- 对于表单里的input可以直接通过name得到元素
document.form[0].input_file
multiple可以多选文件 -->
<input multiple="multiple" type="file" class="form-control" name="input_file" id="input_file">
<input id="btn_read" type="button" class="btn btn-warning" value="读取文件列表">
<ul class="list-group" id="file_list">
</ul>
</form>
<script type="text/javascript">
(function(){
var inputFile = document.querySelector("#input_file");
var btnRead = document.querySelector("#btn_read");
var fileList = document.querySelector("#file_list");
btnRead.addEventListener('click',function(){
var files = inputFile.files;
for(var i=0;i<files.length;i++){
var li = document.createElement("li");
li.innerHTML = '<h5 class="list-group-item-heading">'+files[i].name+'</h5>'+
'<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleDateString()+' '+
files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'KB'+
'</p>';
fileList.appendChild(li);
}
})
})()
</script>
</body>
</html>
multiple可以多选文件(按住ctrl或者shift选择多个文件）
对于表单里的input可以直接通过name得到元素
document.form[0].input_file
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
