<!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. Windows的图形设备接口与Windows绘图

    本次学习目标 理解DC, 映像模式, 坐标系统, 窗口和视口; 学习获取绘图工具(画笔/画刷)的句柄, 设置颜色, 能定义映像模式; 会使用常用的绘图函数. 编写程序: 在屏幕上出现一个圆心沿正弦曲线 ...

  2. JDBC增加、更新、删除数据

    JDBC增加.更新.删除数据 st.executeUpdate(sql) 进行插入.更新.删除操作返回的是受影响的记录的条数 注意:输入的sql语句中,vachar类型记住加单引号 完整代码如下: p ...

  3. ubuntu 配置dns访问外网

    我新建了一个虚拟机后采用的net模式 一 先配置虚拟机ip使其能在局域网内通信 1.vmware 编辑->虚拟网络编辑器 可以看到网关.掩码等信息 可以看到我们配置的ip应该在192.168.1 ...

  4. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  5. Hibernate详讲

    一 概述 1.JPA Java Persistence API,是Java EE为ORM框架定义的规范,任何使用java语言的ORM框架都必须实现该规范.Hibernate/Mybatis都是是JPA ...

  6. CSS选择器：#id和.class中间有空格和无空格的区别

    相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则,但具体怎样不同呢? 首先中间有空格的情况:是选择到.class1类下的.class2类子节点,即 ...

  7. JQ的几组API辨析：

    1．插入: Jq的插入一共有八个API可供选择,结果相类似,下面将以例子,简单明了的介绍下用法: <select name="one" multiple="mult ...

  8. OkHttp3源码详解(三) 拦截器

    1.构造Demo 首先构造一个简单的异步网络访问Demo: OkHttpClient client = new OkHttpClient(); Request request = new Reques ...

  9. axios 同步问题

    Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中(这是官方文档给出的一个解释说明) 它的主要作用是向后台发起异步请求,还有在请求中做更多的可控功能 1. ...

  10. pmp心得

    我报名比较晚,等缴费最后期限,才缴费,下定决心,开始正式的备考. 我的工作比较忙,备考时间特比较短,从拿到书到考试只有二个月了,心理慌慌的,期间还有一门其他的考试,在5月底,实际时间只能有20来天. ...