码迷,mamicode.com
首页 > Windows程序 > 详细

H5计算图片视频资源md5值(使用fileapi)

时间:2018-02-25 13:04:30      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:修改   ber   摘要   attr   app   math   信息   javascrip   htm   

2017/10/28 发布

 

md5概念及作用:

MD5是message-digest algorithm 5(信息-摘要算法)的缩写,被广泛用于加密和解密技术上,它可以说是文件的“数字指纹”。任何一个文件,无论是可执行程序、图像文件、临时文件或者其他任何类型的文件,也不管它体积多大,都有且只有一个独一无二的MD5信息值,并且如果这个文件被修改过,它的MD5值也将随之改变。因此,我们可以通过对比同一文件的MD5值,来校验这个文件是否被“篡改”过。

实际应用:

近期在开发广告资源管理平台时,需要上传广告资源(图片以及视频)进行计算md5值。之所以要计算广告资源的md5值,是为了在文件服务器中存放的资源不会重复获取,以及设备获取广告时通过唯一的md5值,避免重复下载已经获得的广告资源,而是直接使用已经下载的资源。

下面是上传界面的HTML以及JS处理。

用到了H5的File Api 计算。

HTML:

<div class="form-group">
   <label for="img" class="col-sm-2 control-label">文件</label>
   <div class="col-sm-8">
      <input class="form-control" type="file" style="height:auto;"
         id="file" name="file" onchange="imgPreview(this)"
      />
      <img style="max-width:100%;height:auto;margin-top: 10px" id="imgpreview" />
   </div>
   <div id="box"></div>
</div>
<input type="hidden" id="MD5" name="MD5"/>

JavaScript:

document.getElementById("file").addEventListener("change", function () {
    var fileReader = new FileReader(),
        box = document.getElementById(‘box‘),
        blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
        file = document.getElementById("file").files[0],
        chunkSize = 2097152,
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        bs = fileReader.readAsBinaryString,
        spark = bs ? new SparkMD5() : new SparkMD5.ArrayBuffer();

    fileReader.onload = function (ee) {
        spark.append(ee.target.result);
        currentChunk++;

        if (currentChunk < chunks) {
            loadNext();
        } else {
            var md5 = spark.end();
            box.innerText = ‘MD5:  ‘ + md5;
            $(‘#MD5‘).val(md5);
        }
    }

    function loadNext() {
        var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;
        if (bs) fileReader.readAsBinaryString(blobSlice.call(file, start, end));
        else fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }

    loadNext();
});

H5计算图片视频资源md5值(使用fileapi)

标签:修改   ber   摘要   attr   app   math   信息   javascrip   htm   

原文地址:https://www.cnblogs.com/mithrandirw/p/8468881.html

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