在JavaScript中，获取页面上用户选定的文件是一项常见的任务，特别是在构建交互性强的Web应用时。这个过程通常涉及到HTML5的File API，它允许我们访问和处理用户通过<input type="file">元素选择的文件。这篇博客（https://terryang.iteye.com/blog/433731）可能详细介绍了如何实现这一功能。
我们需要一个HTML元素来让用户选择文件，最常见的是`<input type="file">`元素。用户可以通过这个元素的文件选择对话框来选取文件：
```html
<input type="file" id="fileInput">
```
当用户选择文件后，我们可以监听`change`事件来获取选中的文件。这个事件会在用户选择文件后触发：
```javascript
document.getElementById('fileInput').addEventListener('change', function(event) {
var files = event.target.files; // 获取到FileList对象
handleFiles(files); // 调用处理文件的函数
});
```
`event.target.files`是一个`FileList`对象，包含了用户所选择的所有文件。我们可以遍历这个列表，对每个文件进行操作：
```javascript
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log('文件名:', file.name);
console.log('文件类型:', file.type);
console.log('文件大小:', file.size, '字节');
}
}
```
除了基本信息，File API还提供了读取文件内容的方法。我们可以使用`FileReader`对象来实现这一点。例如，读取文件为文本：
```javascript
function readFile(file) {
var reader = new FileReader();
reader.onload = function(event) {
var content = event.target.result;
console.log('文件内容:', content);
};
reader.readAsText(file);
}
handleFiles(files) {
for (var i = 0; i < files.length; i++) {
readFile(files[i]);
}
}
```
`readAsText()`方法会异步读取文件，当读取完成时，`onload`事件会被触发，我们可以在这个回调函数中获取到文件的文本内容。
在实际应用中，我们可能需要处理图片、视频等不同类型的文件，这时可以使用`readAsDataURL()`方法将文件读取为数据URL，方便在页面上显示预览。对于二进制数据，可以使用`readAsArrayBuffer()`。
另外，File API还支持切割文件（`slice()`方法），以及创建新的Blob对象（`new Blob()`），这对于上传大文件或处理部分文件内容非常有用。
总结一下，JavaScript获取页面选中文件的核心知识点包括：
1. 使用`<input type="file">`元素让用户选择文件。
2. 监听`change`事件获取`FileList`对象。
3. 使用`File`对象的属性获取文件信息，如`name`、`type`和`size`。
4. 使用`FileReader`对象读取文件内容，如`readAsText()`、`readAsDataURL()`和`readAsArrayBuffer()`。
5. 遍历`FileList`并处理多个文件。
6. 对文件进行切割和重组，以适应不同的处理需求。
以上只是基本操作，实际上，利用这些API可以构建出各种复杂的文件处理功能，如文件上传、文件预览、文件转换等。在开发时，一定要注意文件操作的异步性，并确保在处理大文件时考虑到性能和用户体验。
