原则上说，浏览器是一个不安全的环境。早期浏览器的内容是静态的，用户上网冲浪，一般就是拉取网页查看。后来，随着互联网的发展，浏览器提供了非常丰富的用户交互功能。从早期的表单交互，到现在的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. 爬取微博的数据时别人用的是FM.view方法传递html标签那么jsoup怎么解析呢

    使用JSOUP就行 这里给出点思路 我只做了自己的首页和其他人的微博首页的抓取 其他的抓取没尝试(不好意思 比较懒...) 首先是利用JSOUP进行登陆 获取页面 看了下微博的登陆表格 发现用了aja ...

  2. Java基本数据类型与包装类、字符串之间的转换

    基本数据类型和包装类的转换:1.装箱:基本数据类型→对应包装类,可分为手动装箱和自动装箱.2.拆箱:包装类→对应基本数据类型,可分为手动拆箱和自动拆箱. 例子:手动装箱:Integer iObj=ne ...

  3. Codeforces Round #524 (Div. 2) F. Katya and Segments Sets（主席树）

    https://codeforces.com/contest/1080/problem/F 题意 有k个区间,区间的种类有n种,有m个询问(n,m<=1e5,k<=3e5),每次询问a,b ...

  4. c# 文件笔记

    1.文件属性操作 File类与FileInfo都能实现.静态方法与实例化方法的区别! //use File class Console.WriteLine(File.GetAttributes(fil ...

  5. python3.4读取excel数据绘图

    #!/usr/bin/env python # -*- coding:utf-8 -*- # __author__ = "blzhu" """ pyt ...

  6. 使用Expression tree访问类的属性名称与值

    表达式树Expression是Linq中一项比较重要的功能,对其深刻了解Lamda以及计算表达式有很大的帮助. 下面是利用 Expression<Func<Object>>[] ...

  7. DOS的几个常用命令

    1.rem:注释 DOS中的注释,其后面的内容会被自动忽略.双冒号(::)也有相同的效果 相当于R语言和Python中的# 2.set:设置变量 set var = 1 将1赋值给变量var 打印出来 ...

  8. urb的处理流程

      USB分析 2013年11月11日 16:06:24 阅读数:1807 转载自:http://blog.csdn.net/aaa6695798/article/details/4776202 很久 ...

  9. attachEvent方法绑定事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. python_day1_python第一个程序 hello world

    Python 第一个程序 1)安装好python后,cmd进入DOS下,直接输入python Python 3.6.0 (v3.6.0:41df79263a11, Dec 23 2016, 08:06 ...