文档章节

ajax 下载显示进度

干煸小黄鱼儿
 干煸小黄鱼儿
发布于 2015/08/04 21:13
字数 185
阅读 19
收藏 0

<!doctype html>

<html class="no-js">

    <head>

        <meta charset="utf-8">

        <title>ajax</title>

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

        <meta name="description" content="">

        <meta name="keywords" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <!-- Set render engine for 360 browser -->

        <meta name="renderer" content="webkit">

        <!-- No Baidu Siteapp-->

        <meta http-equiv="Cache-Control" content="no-siteapp"/>

        <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=mVXVL4BToC5F7LZYE5ARS5ON"></script>-->

    </head>

    <body>

        <div>

            进度:<span id='progress'>0%</span><br/>

            <button onclick="download()">开始下载</button>

        </div>

        <script type="text/javascript">

         var http=new XMLHttpRequest(),//新建一个HTTP请求对象

         progress=document.getElementById('progress');//显示进度

         function download(){

         http.open('GET','./dowload.zip',true);

         http.onreadystatechange=function(){

         if(http.readyState===4){

         progress.innerHTML='ok';

         };

         }

//监听下载进度变化事件

         http.addEventListener('progress',function(evt){

         if(evt.lengthComputable){

         var percent=parseInt((evt.loaded/evt.total)*100);//计算百分比

         progress.innerHTML=percent+'%';

         }

         },false);

         http.send();

     }

        </script>

    </body>

</html>

chrome测试通过


© 著作权归作者所有

干煸小黄鱼儿
粉丝 3
博文 6
码字总数 1089
作品 1
苏州
程序员
私信 提问
PHP+jQuery+Ajax多图片上传

演示下载地址:http://www.erdangjiade.com/js/3.html 效果图: HTML首先我们在页面上放置个上传按钮,使用POST提交到ajax.php。#ulpics 用来显示上传完毕后的图片。关于按钮、进度条、图片垂...

2当家的
2017/03/14
725
1
NProgress,前端必备进度条插件,你值得拥有

官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz/nprogress 安装 依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。...

飞翔的熊blabla
01/18
0
0
Ajax 下载文件

使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现response冲突。如果非要使用ajax的话...

白志华
2016/03/04
512
0
用户界面框架jQuery EasyUI示例大全之进度栏、搜索框及表单演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合...

Miss_Hello_World
2016/09/23
51
0
Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法。同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。这些方法的参数都是一个函数,这个函数将在...

Adam-Lee
2011/07/28
4K
2

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
12分钟前
2
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
43分钟前
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
45分钟前
8
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
49分钟前
7
0
深入了解Redis底层数据结构

说明 说到Redis的数据结构,我们大概会很快想到Redis的5种常见数据结构:字符串(String)、列表(List)、散列(Hash)、集合(Set)、有序集合(Sorted Set),以及他们的特点和运用场景。不过它们是...

TurboSanil
50分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部