JavaScript中的HTML5文件处理？

Question

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

Answer 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;
};

询问是否需要任何澄清。

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 个解决方案

解决方案1
1 2012-10-24 18:35:38

解决方案2
0 已采纳 2012-11-30 04:01:32

解决方案3
-1 2012-10-24 18:20:17

JavaScript中的HTML5文件处理？

问题描述

3 个解决方案

解决方案1 1 2012-10-24 18:35:38

解决方案2 0 已采纳 2012-11-30 04:01:32

解决方案3 -1 2012-10-24 18:20:17

解决方案1
1 2012-10-24 18:35:38

解决方案2
0 已采纳 2012-11-30 04:01:32

解决方案3
-1 2012-10-24 18:20:17