Javascript FileReaderがファイルを正しく読み取らない

Question

私は、アップロードされたファイルを受け取り、それに相当する16進数を表示する短いJavaScript関数を持っています。元のファイルとヘキサエディタでの出力を比較すると、部分的に異なるが完全ではないことがわかります。出力の違いを引き起こしている何

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 

：ここ

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

は、元のファイルと隣同士に出力されますか？どんな助けでも大歓迎です。

Answer 1

jsでHexダンプを生成するには、readAsTextメソッドを使用しないでください。このメソッドは、UCS-2またはUTF-16でデータを変換し、バイナリデータを直接読み込みますreadAsArrayBuffer方法、およびそこからの作業：//developer.mozilla：代わりに内容が変更される場合があります `.readAsText`の

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">