<!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. order by 和group by同时使用

  2. 浅析Java 8新功能Optional

    初识 A container object which may or may not contain a non-null value. 笔者理解,Optional是一个容器类.将Object放到Op ...

  3. python中字典，没键加键，有键操作其键对应的值，的思想

    cars = ['鲁A32444', '鲁B12333', '京B8989M', '黑C49678', '黑C46555', '沪B25041', '黑C34567'] locations = {'沪 ...

  4. RN canvas画布大小之谜

    一.需求 在一个高640.宽360的canvas内画一些坐标点. 二.问题 坐标点只显示了一部分,剩下的点没显示(其坐标属于(640,360)区域). 三.原因 canvas默认的画布大小是高150, ...

  5. BZOJ1053 [HAOI2007]反素数 & BZOJ3085 反质数加强版SAPGAP

    BZOJ 1053 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x ,则称x ...

  6. MyEclipse打包带源码的jar包

    平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不到jar包里面的类的源码了,所以也就无法调试,要想调试,那么就只能通过关联源代码的形式,这样或多或少也有一些不方便,今 ...

  7. Linux 添加yum命令

    第一步,国内的yum仓库 http://mirrors.163.com/centos/7/os/x86_64/Packages/ http://mirrors.aliyun.com/centos/7/ ...

  8. MvcForum中文版+PostgreSql源码下载

    演示地址:http://bbs.hfenxiao.com 因为种处原因在家休假,闲来无事,便将去年关注的一个基于asp.net mvc论坛程序拿出来做了一些调整. 据说PostgreSql是世界上功能 ...

  9. Unihan（统汉字）常用字段介绍

    0 背景 1 文件 1.1 IRG Sources 1.2 Dictionary Indices 1.3 Dictionary-like Data 1.4 Other Mappings 1.5 Rad ...

  10. 2 pygraphviz在windows10 64位下的安装问题（反斜杠的血案）

    可以负责任的说,这篇文档是windows10安装pygraphviz中,在中文技术网站中最新的文档,没有之一.是自己完全结合各种问题,包括调试等,总结出来的. 问题来源:主要是可视化RvNN网络的树结 ...