How to read binary file content in Javascript

Asked

Viewed 1,783 times

14

How to read binary file content in Javascript?

javascript filing-cabinet binary

  • Fernando, could you give an example of a file?

  • I suggest you use a library. For example: https://github.com/jDataView/jBinary

  • Where does the file come from, and what do you want to do with it?

  • With the advent of HTML5, you can explore the "File API" feature and manipulate the binaries you want to work through javascript. Following link on the subject: Working with File API Good luck!

  • Web Javascript or Nodejs?

  • @Fernando, we need more information so we can help you. e.g. What is the challenge of your question ? Why do you need to read this ? Would Javascript be on the server or client ? In case you need your web application to read the file you cannot send it to the server and then you would change it ?

Show 1 more comment

1 answer

19

It depends on the source from where you need to read the file if you want to read from the user’s machine, you will need the File API combined with <input type="file">.

Read a file:

function LerArquivo(file, done, fail) {
    var reader = new FileReader;
    reader.onload = function(evt) {
        done(evt.target.result);
    };
    reader.onerror = function(evt) {
        fail();
    };
    reader.readAsText(file);
}

var response = document.getElementById("response");

document.getElementById("test").onchange = function() {
    if (this.files.length === 1) {
        LerArquivo(this.files[0], function(resposta) {
             response.value = resposta;
        }, function() {
             response.value = "Falha ao ler o arquivo";
        });
    }
};
<input type="file" id="test">
<textarea style="width:100%; height: 400px;" id="response"></textarea>

Read multiple files:

note that it is necessary to add the attribute multiple at the <input>

function LerArquivo(file, done, fail) {
    var reader = new FileReader;
    var name = file.name;

    reader.onload = function(evt) {
        done(name, evt.target.result);
    };
    reader.onerror = function(evt) {
        fail(name);
    };
    reader.readAsText(file);
}

document.getElementById("test").onchange = function() {
    if (this.files.length !== 0) {
        for (var i = 0, j = this.files.length; i < j; i++) {
            LerArquivo(this.files[i], function(nome, resposta) {
                console.log(nome, resposta);
            }, function(nome) {
                console.log("Falha ao ler:", nome);
            });
        }
    }
};
<input type="file" multiple id="test">

Note that it is possible to read the file in different ways:

  • FileReader.readAsArrayBuffer() brings the result as Arraybuffer
  • FileReader.readAsDataURL() brings the result as Base64 with Data URI Scheme
  • FileReader.readAsText() back the result as text and you should set the encoding as needed.
  • FileReader.readAsBinaryString() brings the byte to byte result (It is in disuse and will be removed then it is preferable to use readAsArrayBuffer or readAsDataURL)

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Although it is not considered to refer to this as part of HTML5, it is still not correct, HTML5 is one thing and Javascript Apis are something else. HTML5 actually consists of new tags and features in HTML and the new Javascript Apis interact with these new features of Html5.

Browser other questions tagged javascript filing-cabinet binary

You are not signed in. Login or sign up in order to post.