Файл данных из элемента ввода

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);