前端加密
前端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 杨思强