来自输入元素的文件数据

Question

在 Firefox 3 中，可以访问

<input type="file">

元素的内容，如下所示。

假设一个表单包含以下元素：

<input type="file" id="myinput">

现在可以通过以下方式访问所选文件的数据：

// Get the file's data as a data: URL
document.getElementById('myinput').files[0].getAsDataURL()

有跨浏览器的方式来完成同样的事情吗？

此功能的 Firefox 文档：

• https://developer.mozilla.org/en/nsIDOMFileList
• https://developer.mozilla.org/en/nsIDOMFile

Answer 1

这至少在 Chrome、Firefox 和 Safari 中是可能的：读取文件。 查看相关的 jsfiddle

function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
          document.getElementById('byte_content').textContent = _.reduce(evt.target.result, 
              function(sum, byte) {
                  return sum + ' 0x' + String(byte).charCodeAt(0).toString(16);
              }, '');
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob;
    if (file.slice) {
        blob = file.slice(start, stop + 1);
    }else if (file.webkitSlice) {
      blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      blob = file.mozSlice(start, stop + 1);
    }
    console.log('reader: ', reader);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

Answer 2

在 Firefox 19（2013-02-19 发布）中，他们添加了：

    window.URL.createObjectURL(
        document.getElementById('myinput').files[0]
    );