js 本地文件路径

在JavaScript中，本地文件路径通常指的是浏览器环境中，用户通过<input type="file">元素选择的文件在本地计算机上的路径。然而，出于安全考虑，现代浏览器通常不允许网页直接访问用户本地文件的完整路径。

基础概念

File API: 允许网页读取用户选择的文件内容，但不能获取文件的本地路径。
Blob 对象: 表示不可变的原始数据，File 对象继承自 Blob 对象。

类型

File 对象: 包含文件名、大小、类型等信息。
Blob 对象: 只包含原始数据。

应用场景

文件上传: 用户可以选择文件后，网页可以读取文件内容并上传到服务器。
文件预览: 例如，读取图片文件并在网页上预览。

示例代码

以下是一个简单的示例，展示如何使用File API读取用户选择的文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File API Example</title>
</head>
<body>
    <input type="file" id="fileInput">
    <img id="preview" src="" alt="File Preview" style="max-width: 300px; margin-top: 20px;">

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>