<!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. CodeForces 598A（水）

    还是要注意int和long long的范围,以及double型的问题 pow函数经常会报一个double型的错,参考这篇文章 http://blog.csdn.net/lawrencesgj/arti ...

  2. jquery replace方法去空格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 转：php 获取memcache所有key

    文章出处 在php提供的用于与memcached交互的扩展模块中有memcached与memcache,前者提供方法getAllKeys用于遍历所有Memcached服务器上的key,但是并不保证原子 ...

  4. Akka - Basis for Distributed Computing

    Some concepts as blow: Welcome to Akka, a set of open-source libraries for designing scalable, resil ...

  5. gitlab一次代码回滚引起的bug...

    问题描述:线上问题有一个bug,挺严重的.在线下排查后发现是一个之前的同事添加的代码影响的,为了不影响之前的业务,代码回滚了. 但是 过了几天,测人人员测试之后说这个问题又复现了,然后再次看,发现还是 ...

  6. 转：Java Socket编程

    对于Java Socket编程而言,有两个概念,一个是ServerSocket,一个是Socket.服务端和客户端之间通过Socket建立连接,之后它们就可以进行通信了.首先ServerSocket将 ...

  7. sqldataAdapter/dataset/datatable的使用

    public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Loa ...

  8. 微信开发——微信公众平台实现消息接收以及消息的处理（Java版）

    本文主要讲述了如何在微信公众平台实现消息接收以及消息的处理,使用java语言开发,现在把实现思路和代码整理出来分先给兄弟们,希望给他们带来帮助. 温馨提示: 这篇文章是依赖前几篇的文章的. 第一篇:微 ...

  9. VS无法加载Web项目

    在VS中修改Web项目的服务器设置时无法加载改Web项目,提示如下图 原因:因为项目中的EbcBuy.Bll.Users.WebApi.csproj.user文件并没有加入到版本控制文件,所以讲项目还 ...

  10. docker容器修改hosts文件，重启失效问题解决

    docker容器修改hosts文件 搜了一大批资料,有说需要在docker run --hosts...改:dockerfile改:有点麻烦,下面方案比较好: 参照docker吧(https://ti ...