js读取input文件路径
时间: 2024-10-13 20:05:41 浏览: 25
js获取上传文件的绝对路径实现方法
在JavaScript中,直接从用户选择的输入文件中读取内容通常涉及到HTML5的File API。以下是一个基本步骤:
1. 创建一个`<input type="file">`元素让用户选择文件:
```html
<input type="file" id="fileInput" multiple>
```
2. 使用JavaScript获取这个元素并监听它的change事件:
```javascript
document.getElementById('fileInput').addEventListener('change', function(event) {
const files = event.target.files; // 获取用户选择的文件
});
```
3. 对于每一个选中的文件,你可以创建一个新的FileReader对象,并使用其readAsText()方法读取文本内容:
```javascript
function readFile(file) {
const reader = new FileReader();
reader.onload = function (e) {
const fileContent = e.target.result; // 文件内容作为字符串
console.log(fileContent);
};
reader.readAsText(file); // 读取文件为文本
}
files.forEach(readFile);
```
请注意,`readAsText()`方法用于读取文本文件,如果需要读取其他类型的文件(如图片),可以使用`readAsDataURL()`。
阅读全文