0

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

4

3 回答 3

1

您想使用新的 HTML5 File 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;
};

询问您是否需要任何澄清。

于 2012-10-24T18:35:38.773 回答
0

如果你想使用新的 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);
}
于 2012-11-30T04:01:32.300 回答
-1

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

<?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>
于 2012-10-24T18:20:17.090 回答