原则上说，浏览器是一个不安全的环境。早期浏览器的内容是静态的，用户上网冲浪，一般就是拉取网页查看。后来，随着互联网的发展，浏览器提供了非常丰富的用户交互功能。从早期的表单交互，到现在的websocket实时通信，乃至html5的流行。

html5给前段开发带来了许多有力的工具，以前浏览器大多通过flash插件进行文件的上传和下载，现在我们可以利用html5给我们带来的fileReader api，读取用户通过表单选中的文件内容。

fileReader详情请移步：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

javascript 计算文件MD5值，请移步：

https://github.com/satazor/js-spark-md5

demo实现：

<!DOCTYPE html>

<html>

  <head>

      <meta charset="utf-8">

  </head>

  <body>

         <form id="fileupload" action="" method="POST" enctype="multipart/form-data">

            <div>

                <div>

                    添加文件

                    <input type="file" name="" id="fileinput">

                </div>

                <progress class='progressbar' value="0" max="100" style='width:500px;margin-top:20px'></progress>

                <div style='margin-top:20px'>

                    <span id="handler_info" ></span>

                </div>

            </div>

        </form>

    <script src="./spark-md5.js" type="text/javascript"></script>

    <script>

        function get_filemd5sum(ofile) {

            var file = ofile;

            var tmp_md5;

            var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,

                // file = this.files[0],

                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) {

                // console.log('read chunk nr', currentChunk + 1, 'of', chunks);

                spark.append(e.target.result); // Append array buffer

                currentChunk++;

                var md5_progress = Math.floor((currentChunk / chunks) * 100);

                console.log(file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%");

                var handler_info = document.getElementById("handler_info");

                var progressbar = document.getElementsByClassName("progressbar")[0];

                handler_info.innerHTML=file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%"

                progressbar.value =md5_progress;

                if (currentChunk < chunks) {

                    loadNext();

                } else {

                    tmp_md5 = spark.end();

                    console.log(tmp_md5)

                    handler_info.innerHTML = file.name + "的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();

        }

        var uploadfile  = document.getElementById('fileinput')

        uploadfile.onchange = function(e){

            var file = this.files[0];

             if(!file) {

                alert('请选择文件！');

                return false;

            }

            get_filemd5sum(file)

        }

    </script>

   </body>

</html>

结果：

完成效果：

javascript 计算文件MD5 浏览器 javascript读取文件内容的更多相关文章

  1. Java利用内存映射文件实现按行读取文件

    我们知道内存映射文件读取是各种读取方式中速度最快的,但是内存映射文件读取的API里没有提供按行读取的方法,需要自己实现.下面就是我利用内存映射文件实现按行读取文件的方法,如有错误之处请指出,或者有更好 ...

  2. .net上传文件，利用npoi读取文件信息到datatable里

    整理代码,.net上传文件,利用npoi读取文件到datatable里,使用了FileUpload控件,代码如下: protected void Button1_Click(object sender ...

  3. php高效遍历文件夹、高效读取文件

    /** * PHP高效遍历文件夹(大量文件不会卡死) * @param string $path 目录路径 * @param integer $level 目录深度 */ function fn_sc ...

  4. Java计算文件MD5值(支持大文件)

    import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.securit ...

  5. HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket

    一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...

  6. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  7. HTML5 文件域+FileReader 分段读取文件(五)

    一.默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大 HTML: <div class="container"> <!--文本文 ...

  8. HTML5 文件域+FileReader 分段读取文件(四)

    一.分段读取txt文本 HTML: <div class="container"> <div class="panel panel-default&qu ...

  9. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

随机推荐

  1. 2018.12.22 bzoj3473: 字符串（后缀自动机+启发式合并）

    传送门 调代码调的我怀疑人生. 启发式合并用迭代写怎么都跑不过(雾 换成了dfsdfsdfs版本的终于过了233. 题意简述:求给出nnn个字串,对于每个给定的字串求出其有多少个字串在至少kkk个剩下 ...

  2. 牛客训练四：Applese 涂颜色（费马小定理+快速幂）

    题目链接:传送门 思路: 考虑每一列有2种颜色,总共有n行,每一行的第一个格确定颜色,由于左右颜色不相同,后面的行就确定了. 所以总共有2^n中结果. 由于n太大,所以要用到费马小定理a^n%mod= ...

  3. Devops 到底是什么？（转）

    出处:https://www.cnblogs.com/servicehot/p/6510199.html 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOp ...

  4. GAME PROGRAMM

    SetConsoleTextAttribute consolehwnd = GetStdHandle(STD_OUTPUT_HANDLE); GetStdHandle(nStdHandle)//是返回 ...

  5. 振动器（Vibrator）

    package com.wwj.serviceandboardcast;   import android.app.Activity; import android.app.Service; impo ...

  6. 怎样导入现有的NiosII工程

    查找路径

  7. DDR II中的延时参数

     CL (CAS latency) CL是从读命令发出到有效数据到DDR端口的延时,以时钟为单位.下图分别表示CL = 3和CL = 4的两种情况, 如果读命令在第n个时钟周期发出,CL = m,则读 ...

  8. ubuntu下非交互式安装MySQL

    $ sudo su -# MYSQL_PASS=nova 设定mysql的密码和nova数据库的密码# cat <<MYSQL_PRESEED | debconf-set-selectio ...

  9. 关于Lambda

    1. 查询时,包含关联子对象.如: 数据库中包含表Father和Son,映射实体如下: public class Father { public string Name{get;set;} publi ...

  10. 配置SecureCRT密钥连接Linux

    SSH公钥加密的方式使得对方即使截取了帐号密码,在没有公钥私钥的情况下,依然无法远程ssh登录系统,这样就大大加强了远程登录的安全性. 1.        编辑配置文件 /etc/ssh/sshd_c ...