Chrome遍歷本地資料夾中所有檔案
阿新 • • 發佈:2019-01-01
前言
支援Chrome瀏覽器,不支援IE。IE可通過ActiveX方式輕鬆實現。其他系列瀏覽器未測試,親們測試了可以評論告訴我。
程式碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>page test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.file {
vertical-align: top;
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent : 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
#dllList {
margin: auto;
display: inline-block;
border-collapse: collapse;
}
#dllList th,
td {
width: 200px;
border: 1px solid #98bf21;
font-size: 1em;
text-align: right;
padding: 3px 7px 2px 7px;
}
#dllList th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#dllList tr:nth-child(even) {
color: #000000;
background-color: #EAF2D3;
}
</style>
<script type="text/javascript">
function fileChange(that) {
var files = that.files;
var filesJson = '[';
for (var i = 0; i < files.length; i++) {
let name = files[i].name;
let size = Math.round(files[i].size / 1024) + "K";
if (/\.dll$/ig.test(name)) {//這裡按業務要求篩選所有dll檔案
filesJson += '{"name":"' + name + '","size":"' + size + '"},';
}
}
filesJson = filesJson.slice(0, -1) + "]";
createTable(filesJson);
}
function createTable(jsonStr) {
var obj = JSON.parse(jsonStr);
var tableObject = document.getElementById('dllList');
for (var i in obj) {
let TableRow = tableObject.insertRow();
let fileName = TableRow.insertCell(0);
fileName.innerHTML = obj[i].name;
let fileSize = TableRow.insertCell(1);
fileSize.innerHTML = obj[i].size;
}
}
</script>
</head>
<body>
<table id="dllList">
<thead>
<tr>
<th>檔名</th>
<th>大小(誤差±1K)</th>
</tr>
</thead>
</table>
<a href="javascript:;" class="file">選擇檔案
<input type="file" webkitdirectory directory onchange="fileChange(this);" />
</a>
</body>
</html>