如何在html中打开本地文件？

<input type="file" id="fileInput" />
<script>
    var fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', function(e) {
        var file = e.target.files[0];
        // 处理文件逻辑
    });
</script>

<div id="dropArea" style="width: 300px; height: 200px; border: 2px dashed #ccc;"></div>
<script>
    var dropArea = document.getElementById('dropArea');
    dropArea.addEventListener('dragover', function(e) {
        e.preventDefault();
    });
    dropArea.addEventListener('drop', function(e) {
        e.preventDefault();
        var file = e.dataTransfer.files[0];
        // 处理文件逻辑
    });
</script>

<input type="file" id="fileInput" />
<script>
    var fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', function(e) {
        var file = e.target.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var fileContent = e.target.result;
            // 处理文件内容逻辑
        };
        reader.readAsText(file);
    });
</script>