Javascript读取文件而不使用输入 [英] Javascript read file without using input

问题描述

我有这个代码，对于要转换为 base64 的文件，我必须单击选择文件"，然后选择它.我想对文件名进行硬编码，以便在页面加载时将其转换为 base64.

JavaScript:

var handleFileSelect = function(evt) {var 文件 = evt.target.files;var 文件 = 文件 [0];如果(文件&&文件){var reader = new FileReader();reader.onload = 函数(readerEvt){var binaryString = readerEvt.target.result;document.getElementById("base64textarea").value = btoa(binaryString);};reader.readAsBinaryString(file);}if (window.File && window.FileReader&&window.FileList &&窗口.Blob) {document.getElementById('filePicker').addEventListener('change', handleFileSelect, false);} 别的 {alert('此浏览器不完全支持文件 API.');}};

HTML:

<div><label for="filePicker">选择或拖动文件:</label><br/><input type="file" id="filePicker">
</br><div><h1>Base64 编码版本</h1><textarea id="base64textarea"placeholder="Base64 会出现在这里"cols="50" 行="15"></textarea>

感谢您的回答，他们真的很有帮助.

解决方案

你根本无法做你想做的事.作为安全措施，无法通过 Javascript 设置输入元素的路径.请在此处查看:如何解决 C:fakepath?

I have this code and for a file to be converted into base64 I have to click on Choose file and then select it. I want to hardcode the file name so it is converted to base64 on page load.

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>

EDIT: Thank you for your answers, they were really helpful.

解决方案

You simply can't do what you are trying to do. Setting the path for an input element through Javascript is not possible, as a security measure. Please check here: How to resolve the C:fakepath?

这篇关于Javascript读取文件而不使用输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！