Question

在JavaScript中使用哪些技术将文件（ASCII或二进制）加载到变量（var file =“text”;）中？

Answer 1

您想使用新的HTML5文件API和XMLHttpRequest 2。

您可以收听通过文件输入或拖放选择的文件。掉到了浏览器上。我们来谈谈input[type="file"]方式。

<input type="file">

让我们聆听被选中的文件。

var input; // let input be our file input
input.onchange = function (e) {
  var files = input.files || [];
  var file = files[0];
  if (file) {
    uploadFile(file);
  }
};

创建真正的多部分文件上载请求所需的是FormData对象。此对象表示HTTP POST请求的正文。

var uploadFile = function (file) {
  var data = new FormData();
  data.append('filename', file);

  // create a HTTP POST request      
  var xhr = new XMLHttpRequest();
  xhr.open('POST', './script.php', true);
  xhr.send(data);

  xhr.onloadend = function () {
    // code to be executed when the upload finishes
  };
};

您还可以监控上传进度。

xhr.upload.onprogress = function (e) {
  var percentage = 100 * e.loaded / e.total;
};

询问您是否需要澄清。

Answer 2

如果你想使用新的HTML5方式，这就是我做的方式...请记住，我创建了一个名为File（）的方法，这不是一个真正的HTML5方法，它是它的包装...这个可能会在将来改变，所以要小心（也许重命名）。

HTML：

  <html>
    <body>
      <input type="file" id="files" name="file"/> 
      <button onclick="load()">Load File</button><br /><br />
      <div id="content"></div>
      <script>
        function load() {
          var fileObj = document.getElementById("files");
          var fp = new File(fileObj);
          fp.read(callback);
        }
        function callback(text) {
          var content = document.getElementById("content");
          content.innerHTML = text;
        }
      </script>
    </body>
  </html>

JavaScript的：

function File(name) {
  this.name = document.getElementById(name) ? document.getElementById(name).files : name.files ? name.files : name;
}

// Reads the file from the browser 
File.prototype.read = function(callback) {
  var files = this.name;
  if (!files.length) {
    alert('Please select a file!?');
    return;
  }
  var file = files[0];
  var reader = new FileReader();
  reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
      callback(evt.target.result);
    }
  };
  var data = file.slice(0, file.size);
  reader.readAsBinaryString(data);
}

Answer 3

让JavaScript在PHP或Rails中生成（或者在服务器端使用的任何内容）并包含该文件。

<?php
$my_string = file_get_contents('/path/to/file.txt');
?>

<script>
var my_js_file_string = "<?php echo $my_string; ?>";
...
document.write(my_js_file_string);
</script>

JavaScript中的HTML5文件处理？

3 个答案: