Javascript不使用输入读取文件

Question

我有这个代码,并且要将文件转换为base64,我必须单击选择文件然后选择它.我想硬编码文件名,以便在页面加载时转换为base64.

JavaScript的:

var handleFileSelect = function(evt) {
  var files = evt.target.files;
  var file = files[0];

  if (files && file) {
    var reader = new FileReader();

    reader.onload = function(readerEvt) {
      var binaryString = readerEvt.target.result;
      document.getElementById("base64textarea").value = btoa(binaryString);
    };

    reader.readAsBinaryString(file);
  }

  if (window.File && window.FileReader
      && window.FileList && window.Blob) {
    document.getElementById('filePicker')
        .addEventListener('change', handleFileSelect, false);
  } else {
    alert('The File APIs are not fully supported in this browser.');
  }
};

HTML:

<div>
  <div>
    <label for="filePicker">Choose or drag a file:</label><br/>
    <input type="file" id="filePicker">
  </div>
  </br>
  <div>
    <h1>Base64 encoded version</h1>
    <textarea id="base64textarea"
        placeholder="Base64 will appear here"
        cols="50" rows="15">
    </textarea>
  </div>
</div>

编辑:谢谢你的答案,他们真的很有帮助.

Answer 1

你根本无法做你想做的事。作为安全措施，无法通过 Javascript 设置输入元素的路径。请在此处查看：How to resolve the C:\fakepath?

Answer 2

您可以启动带有--allow-file-access-from-files标志集的 chromium、chrome 浏览器，使用fetch()来XMLHttpRequest()从本地文件系统请求文件。

fetch("file:///path/to/file")
.then(response => response.arrayBuffer())
.then(ab => {
  // do stuff with `ArrayBuffer` representation of file
})
.catch(err => console.log(err));

另请参阅使用 JS 读取本地 XML