原则上说，浏览器是一个不安全的环境。早期浏览器的内容是静态的，用户上网冲浪，一般就是拉取网页查看。后来，随着互联网的发展，浏览器提供了非常丰富的用户交互功能。从早期的表单交互，到现在的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. mybatis拦截器案例之获取结果集总条数

    最近做的项目前端是外包出去的,所以在做查询分页的时候比较麻烦 我们需要先吧结果集的条数返回给前端,然后由前端根据页面情况(当前页码,每页显示条数)将所需参数传到后端. 由于在项目搭建的时候,是没有考虑 ...

  2. 2019.01.16 bzoj4399: 魔法少女LJJ（线段树合并）

    传送门 线段树合并菜题(然而findfindfind函数写错位置调了好久) 支持的操作题目写的很清楚了,然后有一个神奇的限制c≤7c\le7c≤7要注意到不然会去想毒瘤线段树的做法. 思路: 这题只有 ...

  3. 2018.11.02 洛谷P2312 解方程（数论）

    传送门 直接做肯定会TLETLETLE. 于是考验乱搞能力的时候到了. 我们随便选几个质数来checkcheckcheck合法解,如果一个数无论怎么checkcheckcheck都是合法的那么就有很大 ...

  4. 牛客训练三：处女座的比赛（hash打表）

    题目链接:传送门 思路:由于MOD只有9983大小,所以四位小写字母的字符串组合有26+26^2+26^3+26^4=475254种组合. 所以只要每次枚举出从1到475254中的hash值对应的字符 ...

  5. linux系统配置参数修改

    一.永久修改主机名修改/etc/sysconfig/network,在里面指定主机名称HOSTNAME=然后执行命令hostname 主机名这个时候可以注销一下系统,再重登录之后就行了. 或者修改/e ...

  6. 百度Web Uploader组件实现文件上传之分片上传(一)

    当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度.多的不说了直接怼代码 前端是三个监听:一个是获取md5,一个是分片,最后一个是合并代码 <! ...

  7. word粘贴图片+的editor

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  8. How to fix "http error 403.14 - forbidden" in IIS7

    If you encounter the following error: "http error 403.14 - forbidden. The Web server is configu ...

  9. UIImageView的frame设置（4种方式）

    查看图片宽高后,再去设置UIImageView的frame.(不推荐) 用代码自动获取图片的宽高来设置UIImageView的frame: 创建UIImageView的同时,直接设置UIImageVi ...

  10. SCI投稿过程总结、投稿状态解析、拒稿后对策及接受后期相关问答

    SCI投稿过程总结.投稿状态解析.拒稿后对策及接受后期相关问答   http://muchong.com/t-9174366-1 SCI投稿过程总结.投稿状态解析.拒稿后处理对策及接受后期相关问答综合 ...