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

    1.动态初始化 数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组的动态初始化 int [] arr = new int [3]; 2.静态初始化 数据类型 [] 变量名 = {元 ...

  2. 补全爬取的url

    有时爬取到的href不全,如href=‘/11031/’解决方法:from urllib import parseurl=parse.urljoin(response.url,get_url)resp ...

  3. boost-数据类型之auto、any、tuple、variant

    1.auto.decltype   auto是C++11中的关键字,它可以通过类型推导自动得到变量或对象的类型,需要注意的是auto会忽略引用,因为引用其实就代表原对象: #include <v ...

  4. python的6种基本数据类型--字典

    python的6种基本数据类型--字典   字典 字典的定义与特性 字典是Python语言中唯一的映射类型. 定义:{key1:value1,key2:value2} 1.键与值用冒号":& ...

  5. beforeunload事件

    window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/ ...

  6. java中的标识符、关键字、保留字

    Java中关键字(keyword)和保留字(reservedword) Keyword :Java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等. Reserv ...

  7. AngularJS 无限滚动加载数据控件 ngInfiniteScroll

    在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵. ng-infinite-scroll.js这个组件则可以实 ...

  8. Spring MVC 指导文档解读（二）

    Special Bean Types In the WebApplicationContext 解读 1.WebApplicationContext 特有的几种 Bean Types 2. 也表明 与 ...

  9. Unicode和多字节的相互转换

    多字节转Unicode 四步: Step1 #include <iostream> #include "windows.h" using namespace std; ...

  10. 上传图片JS插件Plupload

    Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...