<script type="text/javascript">
　　function register(){
　　　　var frm = document.getElementById('frm');
　　　　var fd = new FormData(frm);
　　　　var request = new XmlHttpRequest();
　　　　request.open('post', './demo.php');
　　　　request.onreadystatechange = function(){
　　　　　　if (request.readystate == 4 && request.status == 200) {
　　　　　　　　　　if(request.responseText == '1'){
　　　　　　　　　　　　alert('上传成功!');
　　　　　　　　　　}
　　　　　　}
　　　　　　request.send(fd);
　　　　　　//上传进度条
　　　　　　request.upload.onprogress = function(e){
　　　　　　　　var total = e.total;//总大小
　　　　　　　　var loaded = e.loaded; //已上传的大小
　　　　　　　　var percent = Math.floor(loaded/total*100);
　　　　　　　　document.getElementById('in').style.width = percent+'%';
　　　　　　　　document.getElementById('in').innerHTML = percent+'%';

　　　　　　}
　　　　}
　　}
</script>
</head>
<body>
<form id="frm">
　　用户名:<input type="text" name="username"><br>
　　头像:<input type="file" name="face"><br>
　　<div id="out">
　　　　<div id="in"></div>
　　</div>
　　<input type="button" value="上传" id="btn">
</form>
</body>

ajax上传进度条的更多相关文章

  1. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  2. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  3. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  4. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  5. spring定时任务-文件上传进度条

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  6. Java 单文件、多文件上传 / 实现上传进度条

    博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...

  7. iOS_文件上传进度条的实现思路-AFNettworking

    iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

  8. asp.net文件上传进度条研究

    文章:asp.net 文件上传进度条实现代码

  9. Layui多文件上传进度条

    Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...

随机推荐

  1. 学习TF:《TensorFlow实战》中文版PDF+源代码

    深度学习乃至人工智能正逐渐在FinTech领域发挥巨大的作用,其应用包括自动报告生成.金融智能搜索.量化交易和智能投顾.而TensorFlow为金融业方便地使用深度学习提供了可能.<Tensor ...

  2. HDU——T 1506 Largest Rectangle in a Histogram|| POJ——T 2559 Largest Rectangle in a Histogram

    http://acm.hdu.edu.cn/showproblem.php?pid=1506  || http://poj.org/problem?id=2559 Time Limit: 2000/1 ...

  3. android framework 01

    .(由下向上启动),Uboot引导内核(linux Kernel)启动,把内核从flash放到内存中,引导内核启动.内核是系统的核心,负责进程的管理内存的管理网络的管理.内核(Linux Kenel) ...

  4. Tools-->SQL Server Profiler监视数据库

    http://www.cnblogs.com/lorking/p/4062787.html https://docs.microsoft.com/en-us/sql/tools/sql-server- ...

  5. es8 --- 新特性

    ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性: Object.values() Object.entries() padStart() padEnd() Object.getOwn ...

  6. VS中创建自定义一个VC工程为基础的开发向导的总结

    作者:朱金灿 来源:http://blog.csdn.net/clever101 VS允许用户进行自定义开发向导.自定义开发向导的好处在于将常用的设置都通过向导生成,从而大大提供开发效率.特别是在开发 ...

  7. 使用Java语言开发微信公众平台（五）——被关注回复与关键词回复

      在上一篇文章中,我们实现了文本消息的接收与响应.可以在用户发送任何内容的时候,回复一段固定的文字.本章节中,我们将对上一章节的代码进行适当的完善,同时实现[被关注回复与关键词回复]功能. 一.微信 ...

  8. 【hihocoder 1122】二分图二•二分图最大匹配之匈牙利算法

    [Link]:https://hihocoder.com/problemset/problem/1122 [Description] [Solution] 二分图匹配,匈牙利算法模板题; 这里我先把染 ...

  9. Ueditor 七牛集成

    UEDITOR修改成功的 http://blog.csdn.net/uikoo9/article/details/41844747 http://blog.csdn.net/u010717403/ar ...

  10. js32---CommonUtil.js

    // BH 命名空间 namespace var BH = {} ; BH.Interface = function(name,methods){ //Interface是类.方法的名字,以后用BH. ...