有思俱乐部学习园地

前端加密

前端md5加密函数为:U.UF.EC.SparkMD5.ArrayBuffer()

场景:在上传文件时对文件进行MD5加密,得到Hash值。
名词解释:ArrayBuffer
    表示二进制数据的原始缓冲区,该缓冲区用于存储各种类型化数组的数据。 无法直接读取或写入 ArrayBuffer,但可根据需要将其传递到类型化数组或 DataView 对象 来解释原始缓冲区。
    他是一个二进制数据的原始缓冲区,虽然 JavaScript 是弱类型语言,但是他本身是对数据的类型和大小都有限制的,我们需要通过某种数据结构将缓冲区的内容有序的读取出来(写进去)。
功能:对字符串或者ArrayBuffer进行md5加密,得到hash值

HTML5文件流获取hash的过程:
   var spark = new U.UF.EC.SparkMD5.ArrayBuffer(); //new一个原始缓冲区对象
   var fileReader = new FileReader(); //读取存储在用户计算机上的文件(或原始数据缓冲区)的内容
   reader.onload = function (e) {  //因为文件流太大,所以需要异步取值。
        console.info(e.target.result); //e.target.result的结果为:ArrayBuffer {}
   }
        

详细上传案例

U.UF.UP.fileMd5 = function (file, callback) {//生成文件hash
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
    // file = this.files[0],
    chunkSize = 2097152,                             // Read in chunks of 2MB
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,
    spark = new U.UF.EC.SparkMD5.ArrayBuffer(),
    fileReader = new FileReader();

    fileReader.onload = function (e) {
        // console.log('read chunk nr', currentChunk + 1, 'of', chunks);
        spark.append(e.target.result);                   // Append array buffer
        currentChunk++;
        if (currentChunk < chunks) {
            loadNext();
            callback(+(100 * currentChunk / chunks).toFixed(2)) // 参数:进度
        } else {
             console.log('finished loading');
             console.info('computed hash', spark.end());  // Compute hash
            callback(100, true, spark.end()) // 参数:进度、 是否完成、 文件hash
        }
    };

    fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
    };

    function loadNext() {
        var start = currentChunk * chunkSize,
      end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

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

工作人员

 
                    
作者:14互联网G5-2 杨思强
信息录入:14互联网G5-2 杨思强