将文件作为字符串上传到 JavaScript 变量答案

【问题标题】：Upload File as String to JavaScript Variable将文件作为字符串上传到 JavaScript 变量
【发布时间】：2023-03-25 02:33:01
【问题描述】：

客户端有什么方法可以仅使用 JavaScript 将 HTML 表单（例如 .txt 或 .csv 格式）的文件作为字符串上传到 JavaScript 变量？如果是这样，你能提供一个简单的例子吗？我不想使用任何 PHP。

【问题讨论】：

看看 FileReader API
这是唯一的方法吗？
啊，我没有注意到 php！好吧，只有JS是不可能的！因为它是客户端脚本而不是服务器端；）
有可能，再次使用 FileReader API，它是一个仅限 javascript 的 api！
@wagtail 这与 Jquery 无关，这是您要使用哪个 Javascript 版本的问题。最后一个支持这个api。 Javascript 1.5 或更早版本不支持。

标签： javascript forms file-upload

【解决方案1】：

这是一个基于名为“myform”的表单的快速而肮脏的示例，该表单包含一个名为“myfile”的文件输入：

document.forms['myform'].elements['myfile'].onchange = function(evt) {
    if(!window.FileReader) return; // Browser is not compatible

    var reader = new FileReader();

    reader.onload = function(evt) {
        if(evt.target.readyState != 2) return;
        if(evt.target.error) {
            alert('Error while reading file');
            return;
        }

        filecontent = evt.target.result;

        document.forms['myform'].elements['text'].value = evt.target.result;
    };

    reader.readAsText(evt.target.files[0]);
};

这是相关的 HTML 表单：

<form id="myform">
  <p>
    <input id="myfile" name="files[]" multiple="" type="file" />
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea>
  </p>
</form>

和jsfiddle 进行演示。

【讨论】：

【解决方案2】：

yent's answer 的这种变体管理多个上传并使用 jquery：

HTML：

<form id="myform">
  <p>
    <input id="myfile" name="files[]" multiple="" type="file" />
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea>
  </p>
</form>

脚本：

$("#myfile").on("change", function (changeEvent) {
  for (var i = 0; i < changeEvent.target.files.length; ++i) {
    (function (file) {               // Wrap current file in a closure.
      var loader = new FileReader();
      loader.onload = function (loadEvent) {
        if (loadEvent.target.readyState != 2)
          return;
        if (loadEvent.target.error) {
          alert("Error while reading file " + file.name + ": " + loadEvent.target.error);
          return;
        }
        console.log(loadEvent.target.result.length); // Your text is in loadEvent.target.result
      };
      loader.readAsText(file);
    })(changeEvent.target.files[i]);
  }
});

值得注意的是：

对于每个（并发）文件读取，您必须使用一个 FileReader。否则，您会看到像 The object is already busy reading 这样的异常。
loadEvent 回调将以任意顺序调用，可能取决于上传的大小。
loadEvent 闭包将看到结束循环的i 值。
FileReader 结果不是数组；他们没有 forEach。

这个jsfiddle 演示通过在更改处理程序中布置 div 来保留上传顺序。

【讨论】：