<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<script type="text/javascript">

    function showPreview(source) {

        var file = source.files[0];

        if(!/image\/\w+/.test(file.type)){

            alert("请确保文件为图像类型");

            return false;

        }

        if(window.FileReader) {

            var fr = new FileReader();

            fr.onloadend = function(e) {

                document.getElementById("portrait").src = e.target.result;

            };

            fr.readAsDataURL(file);

        }

    }

    window.onload=function () {

    var h = {

        init: function() {

            var me = this;

            document.getElementById('File').onchange = me.fileHandler;

            document.getElementById('Abort').onclick = me.abortHandler;

            me.status = document.getElementById('Status');

            me.progress = document.getElementById('Progress');

            me.percent = document.getElementById('Percent');

            me.loaded = 0;

            //每次读取1M

            me.step = 1024 * 1024;

            me.times = 0;

        },

        fileHandler: function(e) {

            var me = h;

            var file = me.file = this.files[0];

            var reader = me.reader = new FileReader();

            //

            me.total = file.size;

            reader.onloadstart = me.onLoadStart;

            reader.onprogress = me.onProgress;

            reader.onabort = me.onAbort;

            reader.onerror = me.onerror;

            reader.onload = me.onLoad;

            reader.onloadend = me.onLoadEnd;

            //读取第一块

            me.readBlob(file, 0);

        },

        onLoadStart: function() {

            var me = h;

        },

        onProgress: function(e) {

            var me = h;

            me.loaded += e.loaded;

            //更新进度条

            me.progress.value = (me.loaded / me.total) * 100;

        },

        onAbort: function() {

            var me = h;

        },

        onError: function() {

            var me = h;

        },

        onLoad: function() {

            var me = h;

            if(me.loaded < me.total) {

                me.readBlob(me.loaded);

            } else {

                me.loaded = me.total;

            }

        },

        onLoadEnd: function() {

            var me = h;

        },

        readBlob: function(start) {

            var me = h;

            var blob,

                file = me.file;

            me.times += 1;

            if(file.webkitSlice) {

                blob = file.webkitSlice(start, start + me.step + 1);

            } else if(file.mozSlice) {

                blob = file.mozSlice(start, start + me.step + 1);

            }else if(file.slice) {

                blob = file.slice(start, start + me.step + 1);

            }

            me.reader.readAsText(blob);

        },

        abortHandler: function() {

            var me = h;

            if(me.reader) {

                me.reader.abort();

            }

        }

    };

    h.init();

    }

</script>

<input type="file" name="file" onchange="showPreview(this)" />

<img id="portrait" src="" width="70" height="75">

<form>

    <fieldset>

        <legend>分度读取文件：</legend>

        <input type="file" id="File" />

        <input type="button" value="中断" id="Abort" />

        <p>

            <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>

        </p>

        <p id="Status"></p>

    </fieldset>

</form>

</body>

</html>

H5上传图片，并且显示进度条的更多相关文章

  1. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  2. 任务栏显示进度条 CreateComObject(CLSID_TaskbarList) as ITaskbarList4

    http://www.cnblogs.com/jxsoft/archive/2011/06/02/2067712.html //在任务栏显示 进度条 unit Unit9; interface use ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. WPF下载远程文件，并显示进度条和百分比

    WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...

  5. （委托事件处理）关于多线程执行显示进度条的实例（转）&&线程间操作无效: 从不是创建控件“rtxtEntryNO”的线程访问它。

    关于多线程执行显示进度条的实例! 之前回答了一篇关于怎么在线程中操作进度条的帖子,估计有人看的不是很明白今天没事,写了一个小小的实例,很简单,就2个文件权当抛砖引玉,希望有更好解决方案的人发表一下意见 ...

  6. android标题栏(titlebar)显示进度条

    在后台线程中执行各种操作(网络连接.大数据存储)的时候,我们希望让客户能看到后台有操作在进行,那么既能有效的提示用户,又不占用当前操作空间,最好的方法就是在标题栏有个进度条. [代码] [Java]代 ...

  7. ProgressIndicator显示进度条以及一些文字信息

    //ProgressIndicator可以显示进度条以及一些文字信息,不过这个属性一般都在cs文件中操作. private void PhoneApplicationPage_Loaded(objec ...

  8. VC下载文件 + 显示进度条

    在codeproject里找了许久,发现这样一个VC下载文件并显示进度条的源码,于是添加了些中文注释: 1.下载线程函数: UINT DownloadFile(LPVOID pParam) { CWn ...

  9. VC下载文件显示进度条

    VC下载文件显示进度条 逗比汪星人2009-09-18上传   by Koma http://blog.csd.net/wangningyu http://download.csdn.net/deta ...

  10. C# WinFrom 导入Excel文件，显示进度条

    因为WINForm程序是在64位上运行如果使用另外一种快速的读取Excel的方法会报“未在本地计算机上注册“Microsoft.Jet.OLEDB.12.0”提供程序” 所以我就换了现在这种读取有点慢 ...

随机推荐

  1. bnu 被诅咒的代码

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=10792 被诅咒的代码 Time Limit: 1000ms Memory Limit: 65536K ...

  2. 用手机访问管理mysql

    移动办公的情况及需求越来越多,平时MySQL,Oracle,SQLServer等数据库的管理都要通过客户端工具操作,现在有一款基于web网页的软件:TreeSoft数据库管理系统,在服务器布署一套后, ...

  3. PAT 1052. Linked List Sorting

    这场考试当年还参加了,当时直接用内置的排序了,否则自己写归并排序浪费时间啊,现在来练习一发.估计又有些节点没在链表里面,当时没考虑这个情况,所以一直有些case没过 #include <iost ...

  4. Django框架model实现数据库增删查改

    1.创建Django工程 https://www.cnblogs.com/CK85/p/10159159.html 2.在model.py中配置生成表格的类对象. from django.db imp ...

  5. 使用WampServer搭建本地PHP环境，绑定域名，配置伪静态

    倡萌之前介绍过 USBWebserver 快速搭建本地PHP环境 ,推荐USBWebserver的原因在于它是绿色的,不需要安装,想使用就手动运行下即可.但是 USBWebserver 也有自身的弱点 ...

  6. Maven学习总结（七）：Maven的聚合和继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...

  7. 关于 img 父容器比img图片要多4个像素的问题

    问题背景: <div> <img src="" /> </div> 图片和div 的宽度相同,div的高度等于图片的高度 结果发现div的高度 ...

  8. JavaScript Standard Style

    这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. https://github.com/standard/standard/blob/ ...

  9. LeetCode 533----Lonely Pixel II

    问题描述 Given a picture consisting of black and white pixels, and a positive integer N, find the number ...

  10. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)

    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...