原则上说，浏览器是一个不安全的环境。早期浏览器的内容是静态的，用户上网冲浪，一般就是拉取网页查看。后来，随着互联网的发展，浏览器提供了非常丰富的用户交互功能。从早期的表单交互，到现在的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. Hadoop3集群搭建之——hive安装

    Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hadoop3集群搭建之——配置ntp服务 Hadoop3集群搭建之——hbase安装及简单操作 现在到 ...

  2. java运行报错:nested exception is java.lang.NoSuchFieldError: INSTANCE,但使用@Test测试是好的

    解决方法: 原因是,在tomcat里,同名不同版本的jar包,默认加载版本低的.我项目里有两个httpclient jar包.一个4.2.5  另一个是4.5.所以加载了4.2.5的,而我要用的是4. ...

  3. 2018.11.01 NOIP训练 图论（线段树+倍增+dfs序）

    传送门 一道挺妙的题. 对于询问点(u,v),如右图所示,我们可以发现存在一个点m在u->v的路径中,m子树的点到u是最近的,m子树外到v是最近的.其中dis(u,m)=(dis(u,v)-1) ...

  4. boost--ref

    1.ref简介 reference_wrapper包含在ref库中,它是引用包装器类型,即其内部包装了引用. 成员函数get().get_pointer()分别可以获得被包装的引用和其指针.使用需要包 ...

  5. C++之基于排序方法求一组数的中位数

    中位数也就是中值: 故需要先对数组进行排序(选择,插入,冒泡排序),然后在找出数组的中值. //求中值 #include<iostream> using namespace std; in ...

  6. myeclipse安装maven

    开始开门见山了,至于maven是什么请百度百科. 第一步: 下载maven,进入maven官网下载:http://maven.apache.org/download.cgi 第二步: 1.解压下载好的 ...

  7. Nginx使用（配置开机启动）

    环境: 系统:CentOS 6.5 Final 安装目录:/usr/local/nginx Nginx开机自启: ①编写shell实现控制 vi /etc/init.d/nginx 添加内容: #!/ ...

  8. SSM_CRUD新手练习（4）修改生成的mapper.xml映射文件

    我们为什么要修改呢,这是因为我们查询的时候,我们有时候需要连表查询,例如我们需要查询出员工表的信息(emp_id,emp_name...)与此同时,我们还想查询出该员工所在的部门(dept_name) ...

  9. SVN代码管理发布

    1.svn的独立模式应用 2.svn钩子的应用(例如:代码提交前的文件格式限制,大小限制,代码发布svn成功后的备份等等) 3.大型企业的代码发布流程 有一些制度流程.逻辑方案 4.业务变更管理

  10. springMVC一个Controller处理所有用户请求的并发问题

    有状态和无状态的对象基本概念: 有状态对象(Stateful Bean),就是有实例变量的对象 ,可以保存数据,是非线程安全的.一般是prototype scope. 无状态对象(Stateless ...