码迷,mamicode.com
首页 > Web开发 > 详细

md5验证文件上传,确保信息传输完整一致

时间:2019-01-17 21:19:45      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:err   array   load   ||   some   ogre   ice   选择   read   

 

注:因为是公司项目,仅记录方法和思路以及可公开的代码。

最近在公司的项目中,需要实现一个上传升级包到服务器的功能;

在往服务器发送文件的时候,需要确保 文件从开始发送,到存入服务器磁盘的整个传输的过程没有发生变动;

这时候想起了MD5;

关于MD5:

MD5值就像是这个文件的“数字指纹”,每个文件的MD5值是不同的。

如果任何人对文件做了任何改动,其MD5值也就是对应的“数字指纹”就会发生变化。

MD5就可以为任何文件(不管其大小、格式、数量)产生一个同样独一无二的“数字指纹”;

 

计算MD5值并自动的工具:

技术分享图片
    get_filemd5sum: function (ofile) {
        var file = ofile;
        var tmp_md5;
        var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
            chunkSize = 8097152, // Read in chunks of 2MB
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            spark = new SparkMD5.ArrayBuffer(),
            fileReader = new FileReader();

        fileReader.onload = function (e) {
            spark.append(e.target.result); // Append array buffer
            currentChunk++;
            var md5_progress = Math.floor((currentChunk / chunks) * 100);
            console.log(file.name + "  正在处理,请稍等," + "已完成" + md5_progress + "%");

            if (currentChunk < chunks) {
                loadNext();
            } else {
                tmp_md5 = spark.end();
                $("#fileBatch").val(tmp_md5);
                console.log("MD5值是:" + tmp_md5);
            }
        };

        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();
    }
View Code

注:使用需要微改。

调用:

get_filemd5sum(File);

效果:

选择文件前:

技术分享图片

选择文件后:

如果文件比较大,生生需要一点点时间

技术分享图片

最后:

技术分享图片

最后将文件和本页面的MD5验证码发送到服务器后台,后台再读取收到的文件,再计算MD5,最后和在上传前的MD5验证,如果验证通过就添加记录,否则删除文件。

 

md5验证文件上传,确保信息传输完整一致

标签:err   array   load   ||   some   ogre   ice   选择   read   

原文地址:https://www.cnblogs.com/ynhwl/p/10284306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!