Hi! I am Mofei!

Use HTML5 File API read the MD5 code of a file

Background

Since the appearance of the html5 file api, we can do more and more things, and it becomes more and more interesting. I have introduced some examples of the File API such as "Html5 Realization of Breakpoint Continuation" and "HTML5 Realization of Drag and Drop Download". Today, I will share with you how to use HTML5 file api to read the MD5 code of a file.

MD5 code has a very important in the unique identification of files. MD5 is commonly used in the industry for file identification, file instantaneous transmission, and file security inspection.

Let's get straight to the point.

Implementation

First we need to listen for changes in the input box. Tell the browser, you will watch the input and if there is a change, you will execute the releated code immediately.

document.getElementById("file").addEventListener("change", function() {
    //...
}

Reading file: It is easy to read the file that selected by the user through the input files object

file = document.getElementById("file").files[0]

After that, we need split the file bacause the file may be very large, such as 10G or 20G, it will be cruel to hand it over to the memory at one time. So we divided the file by small pieces, let's say 2M per piece, and figured out how many segments need to be divided in total.

var chunkSize = 2097152;
chunks = Math.ceil(file.size / chunkSize);

Then split the file

// The slice method of file, pay attention to its compatibility, it is written differently in different browsers
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice
// Then specify the file and the beginning and ending segments to get the cut file.
blobSlice.call(file, start, end)

After everything is done, it is time to read the specific information of the file.

Here we use Javascript's FileReader() method, which can read the detailed content of the user's local file.

The usage is as follows

var fileReader = new FileReader();
// blobSlice.call(file, start, end) is the method of dividing the file before.
// As long as the start and end are maintained, the files can be passed to the fileRader object piece by piece
fileReader.readAsBinaryString(blobSlice.call(file, start, end));
// Finally, after each file is processed, the onload event of fileReader will be triggered
fileReader.onload = function(e){
    // e.target.result is the fragment information we want
    // The obtained fragments are cached here, and the MD5 calculation can be performed after all fragments are completed.
}

Well, everything is ready here. Since native Javascript does not have a direct way to calculate MD5, here we refer to a better spark-md5 library to assist us in MD5 calculation. The better point is that spark-md5 can also calculate by slice if processing files.

spark = new SparkMD5();
spark.appendBinary(filepice1);
spark.appendBinary(filepice2);
spark.appendBinary(filepice3);
....
// After all the fragments are processed, call the following method to get the MD5 of the file
spark.end()

So far the whole process is over. The simple description is: use input to select the file -> spilt the file -> read the file with the FileReader method -> hand it over to Spark-md5 for processing.

code

DEMO

The completed code is attached:

// Note that this method references the SparkMD5 library library: https://github.com/satazor/SparkMD5
// listen for textbox changes
document.getElementById("file").addEventListener("change", function() {
    // declare the necessary variables
    var fileReader = new FileReader(), box = document.getElementById('box');
    // File segmentation method (pay attention to compatibility)
    blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
    file = document.getElementById("file").files[0],

    // The file is divided into 2M per block, and the details of the division are calculated
    chunkSize = 2097152,
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,

    // Create md5 object (based on SparkMD5)
    spark = new SparkMD5();
    
    // Processing after each file is read
    fileReader.onload = function(e) {
        console.log("Read file", currentChunk + 1, "/", chunks);
        // Each block is calculated by sparkMD5
        spark.appendBinary(e.target.result);
        currentChunk++;
        
        // If the file processing is completed, calculate the MD5, if there are still fragments to continue processing
        if (currentChunk < chunks) {
            loadNext();
        } else {
            console.log("finished loading");
            box.innerText = 'MD5 hash:' + spark.end();
            console.info("Computed Hash", spark.end());
        }
    };

     // Process the upload of the single file
     function loadNext() {
         var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;

         fileReader.readAsBinaryString(blobSlice.call(file, start, end));
     }

      loadNext();
});

DEMO

419390

HI, THERE!I AM MOFEI