Javascript FileReader читает файл неправильно

1

У меня есть короткая функция JavaScript, которая возьмет загруженный файл и отобразит его шестнадцатеричный эквивалент. Сравнение исходного файла и результата в шестнадцатеричном редакторе показывает, что они частично разные, но не полностью.

String.prototype.hexEncode = function(){
  var hex, i;

  var result = "";
  for (i = 0; i < this.length; i++) {
    hex = this.charCodeAt(i).toString(16);
    result += ("" + hex).slice(-4);
  }

  return result
}

function upload() {
  var file = document.getElementById("fileToUpload").files[0];
  var reader = new FileReader();
  reader.readAsText(file, "windows-1252");
  reader.onload = function (evt) {
    var program = evt.target.result.hexEncode();
    program = program;
    console.log(program);
  }
}

Вот исходный файл и вывод рядом друг с другом:

2A 2A 54 49 38 33 46 2A 1A 0A 0A 43 72 65 61 74
2A 2A 54 49 38 33 46 2A 1A AA 43 72 65 61 74 65

Что вызывает разницу в результатах? Любая помощь будет принята с благодарностью.

  • 1
    Вместо .readAsText который может изменить содержимое, вы пробовали вместо него .readAsArrayBuffer ?
  • 0
    Определенно не пытайтесь генерировать шестнадцатеричный дамп из результата readAsText. Более того, с кодировкой не по умолчанию. readAsArrayBuffer - это то, что вы хотите.
Показать ещё 2 комментария
Теги:
ecmascript-6
filereader
iso-8859-1
windows-1252

1 ответ

1
Лучший ответ

Чтобы создать Hex-дамп в js, вы не захотите использовать метод readAsText, который преобразует ваши данные в UCS-2 или UTF-16, вместо этого прочитайте непосредственно двоичные данные, которые вы получите из метода readAsArrayBuffer, и работа оттуда:

function hexDump(file) {
  return new Promise((res, rej) => {
    if (!(file instanceof Blob)) rej('wrong input');
    const reader = new FileReader();
    reader.onload = e => {
      res(hex(reader.result));
    };
    reader.onerror = e => rej('error while reading');
    reader.readAsArrayBuffer(file);
  });
  // gotten from https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Example
  function hex(buffer) {
    const hexCodes = [];
    const view = new DataView(buffer);
    for (let i = 0; i < view.byteLength; i += 4) {
      // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
      let value = view.getUint32(i)
      // toString(16) will give the hex representation of the number without padding
      let stringValue = value.toString(16)
      // We use concatenation and slice for padding
      let padding = '00000000'
      let paddedValue = (padding + stringValue).slice(-padding.length).toUpperCase();
      hexCodes.push( // simple prettyfying
        paddedValue.slice(0,2),
        paddedValue.slice(2,4),
        paddedValue.slice(4,6),
        paddedValue.slice(6,8)
        );
    }
    return hexCodes.join(' ');
  }
}

// How to use it
inp.onchange = e => hexDump(inp.files[0].slice(0, 100)) // for demo I slice the file
    .then(hex => console.log(hex))
    .catch(e => console.error(e));
<input type="file" id="inp">

Ещё вопросы

Сообщество Overcoder
Наверх
Меню