Question

如何使用JavaScript从使用文件输入上传的文件中访问二进制表示？：

<input type="file" name="file">

我可以通过以下方式成功访问上传文件的详细信息：

$('[name="image"]').get(0).files[0].name
// "2013-10-19 15.10.59.jpg"

$('[name="image"]').get(0).files[0].size
// 774016

$('[name="image"]').get(0).files[0].type
// "image/jpeg"

但不是真实的代表。

我找到了使用以下内容的this教程：

document.getElementById("photo").files[0].getAsBinary()

但是，我的浏览器中不存在该方法（OS X 10.9上的Chrome Canary 34.0.1772.0）。

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/API/File.getAsBinary

非标此功能是非标准功能，不符合标准。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

它表明：

注意：此方法已过时;你应该使用FileReader方法readAsBinaryString（）或readAsArrayBuffer（）代替。

使用FileReader：

//Retrieve the first (and only!) File from the FileList object
    var f = document.getElementById("photo").files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert("name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents
        );  
      }
      r.readAsText(f);

但请注意，FileReader API仍然是工作草案，因此这不适用于所有浏览器。据我所知，目前没有支持的方法，您可以考虑使用Ajax上传文件并使用服务器端语言读取其内容吗？

Answer 2

使用FileReader API的readAsBinaryString方法

获取文件输入值作为二进制数据

2 个答案: