24

我有以下代码通过 HTML5 File API 读取文件。我已经通过 input=file 元素上传了文件。以下是代码块。

<input type="file" id="files" name="file" />
<button id="readFile">Read File</button>
<output id="content"></output>

<script>

function readFile() 
{
    /* Get the reference of the inpout element. */
    var files = document.getElementById('files').files;
    console.log(files);

    if (!files.length) 
    {
      alert('Please select a file!');
      return;
    }

    /* Reading the first file selected. You can process other files similarly in loop. */
    var file = files[0];

    /* Instantiate the File Reader object. */
    var reader = new FileReader();

    /* onLoad event is fired when the load completes. */
    reader.onload = function(event) {
        document.getElementById('content').textContent = event.target.result;      
    };

    /* The readAsText method will read the file's data as a text string. By default the string is decoded as 'UTF-8'. */
    reader.readAsText(file);
}

document.getElementById('readFile').addEventListener('click', function(event) {
     readFile();
  }, false);

</script>

如果我不想上传文件并通过 input=type 元素向 HTML5: File API 提供文件路径来读取文件并显示它怎么办？

我知道 HTML5: File API 不采用直接文件路径。有什么解决办法吗？

4

2 回答 2

27

出于安全原因，浏览器不允许直接访问 Javascript 的绝对路径和文件系统。您只能通过在 javascript 中调用 'val()' 函数来获取文件名，仅此而已。

所以不要浪费你的时间。

于 2013-11-23T22:44:42.670 回答
0

最新版本的 IE 在文本框中返回文件的完整绝对路径。您可能想使用： var filePath = document.getElementById("myFile").value; 获取绝对路径

PS 仅在 IE 11 上尝试过

于 2015-02-09T05:07:04.183 回答