<!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. 学习Golang的步骤建议

    一.快速入门 通过快速入门可以宏观的了解Go相关知识.快速入门可以去学习 go-tour 国内可以访问的中文版的 go-tour 地址有下面一些: http://gotour.qizhanming.c ...

  2. C#解析PDF

    C#解析PDF的方式有很多,比较好用的有ITestSharp和PdfBox. PDF内容页如果是图片类型,例如扫描件,则需要进行OCR(光学字符识别). 文本内容的PDF文档,解析的过程中,我目前仅发 ...

  3. BZOJ4513: [Sdoi2016]储能表(数位dp)

    题意 题目链接 Sol 一点思路都没有,只会暴力,没想到标算是数位dp??Orz 首先答案可以分成两部分来统计 设 \[ f_{i,j}= \begin{aligned} i\oplus j & ...

  4. vue项目使用vue-i18n和iView切换多语言

    效果图: 当然,如果使用iview组件,组件也会对应切换语言. 这里,假设已经用vue-cli脚手架创建了项目,熟悉vue-router,而且已经引入了iview UI. 第一步: 我们在main.j ...

  5. web前端面试题（持续更新）

    此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...

  6. kali 的端口扫描nmap

    输入“nmap+空格+“-O”+空格+IP地址或域名. 扫描所有TCP端口:输入“nmap+空格+“-sT”+空格+IP地址或域名” 扫描所有开放的UDP端口:输入“nmap+空格+”-sP”+空格+ ...

  7. Jmeter入门（一）————线程组配置

    线程组相当于有多个用户,同时去执行相同的一批次任务.每个线程之间都是隔离的,互不影响的.一个线程的执行过程中,操作的变量,不会影响其他线程的变量值. Delay Thread creation unt ...

  8. MySQL在线加字段实现原理

    博客已转移到腾讯DBA博客 http://tencentdba.com/ 腾讯互娱内部维护了一个MySQL分支,基于官方5.5.24,实现了类似于Oracle 11g的快速加字段功能,这个分支我们内部 ...

  9. d3js selections深入理解

    D3 selections选择DOM元素以便可以对这些dom元素做相应的操作,比如:更改其style,修改其属性,执行data-join操作,或者插入.删除相应elements 比如,如果给定5个ci ...

  10. Linux下postgres安装fuzzystrmatch其他拓展包

    (1)安装gdal # wget http://download.osgeo.org/gdal/2.0.0/gdal-2.0.0.tar.gz # tar zxvf gdal-2.0.0.tar.gz ...