HTML5之文件API
阿新 • • 發佈：2018-08-22
locale con 讀取文件 att read time lis 點擊 action
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件API</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container">
<form action="">
<!-- 對於表單裏的input來說：可以直接通過name找到
document.form[0].input_file
multiple讓文件域可以多選 -->
<input id="input_file" class="form-control hidden" type="file" name="input_file" multiple>
<input id="btn_select" class="btn btn-info" type="button" value="選擇文件">
<!--<input id="btn_read" class="btn btn-warning" type="button" value="讀取文件列表">-->
<ul id="file_list" class="list-group">
</ul>
</form>
</div>
<script>
(function() {
var inputFile = document.querySelector(‘#input_file‘);
var btnRead = document.querySelector(‘#btn_read‘);
var fileList = document.querySelector(‘#file_list‘);
var btnSelect = document.querySelector(‘#btn_select‘);
btnSelect.addEventListener(‘click‘, function() {
// 在按鈕點擊時調用input的點擊
inputFile.click();
});
// 點擊過後
// btnRead.addEventListener(‘click‘, function() {
// var files = inputFile.files;
// for (var i = 0; i < files.length; i++) {
// var li = document.createElement(‘li‘);
// li.setAttribute(‘class‘, ‘list-group-item‘);
// // 創建信息的子節點
// 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);
// }
// });
// 選擇完成後
inputFile.addEventListener(‘change‘, function() {
var files = inputFile.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement(‘li‘);
li.setAttribute(‘class‘, ‘list-group-item‘);
// 創建信息的子節點
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>
HTML5之文件API