<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Files</title>
</head>
<body>
<input type="file" id="filePicker" multiple>
<button onclick="listFiles()">List Files</button>
<label>Sort By:</label>
<select id="sortBy" onchange="listFiles()">
<option value="name">Name</option>
<option value="size">Size</option>
<option value="time">Create Time</option>
</select>
<pre id="fileList"></pre>
<script>
// 比较函数:根据不同的属性进行排序
function compare(a, b, property) {
if (property === "size") {
return a[property] - b[property];
} else if (property === "name") {
return a[property].localeCompare(b[property]);
} else if (property === "time") {
return Date.parse(a[property]) - Date.parse(b[property]);
}
}
// 获取所有选择的文件信息,并按照选择的属性进行排序
function listFiles() {
var fileList = document.getElementById('fileList');
fileList.innerHTML = "";
var files = document.getElementById('filePicker').files;
var fileInfos = [];
for (var i = 0; i < files.length; i++) {
var fileInfo = {};
fileInfo["Name"] = files[i].name;
fileInfo["Size"] = files[i].size;
fileInfo["Type"] = files[i].type;
fileInfo["CreateTime"] = files[i].lastModifiedDate.toLocaleDateString();
fileInfos.push(fileInfo);
}
// 获取选择的排序属性
var property = document.getElementById("sortBy").value;
// 根据选定属性对文件信息进行排序
fileInfos.sort(function(a, b) {
return compare(a, b, property);
});
// 将文件信息以 JSON 形式输出
fileList.innerHTML = JSON.stringify(fileInfos, null, "\t");
}
</script>
</body>
</html>
获取文件的信息,并排序
最新推荐文章于 2024-09-14 17:34:00 发布
此代码示例展示了一个HTML页面,用户可以选取多个文件,然后使用JavaScript来列出文件信息并根据名称、大小或创建时间进行排序。文件信息包括文件名、大小、类型和最后修改日期。
摘要由CSDN通过智能技术生成