<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. javaScript for in循环遍历对象

    for循环常被我们用来遍历数组,而如何遍历对象呢? 这时就需要用到for in循环了 写一个遍历对象名简写如下: for(var xxx in ooo){console.log(xxx)} 其中xxx ...

  2. HTTP 413报错

    在php中通过flash上传文件到服务器端时报413错误,原来一直以为是php.ini配置的问题,但是检查了php.ini的配置以后,发现不是php.ini的问题,最后是通过Http Analyzer ...

  3. hdoj-1421-搬寝室【DP】

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  4. 单线程实现检索当当网泄露的1GB用户数据

     新建项目dangdangusersearch 2.编写头文件head.h #ifndef _HEAD_H_ #define _HEAD_H_ #include <stdio.h>   ...

  5. vim 解决tags递归查询问题

    今天在vim下配置了两个插件,分别是exuberant-ctags 跟cscope.这两个插件主要是用来实现类.方法查询跟跳转.至于它们如何安装跟使用,网上教程一大堆,我也是按着别的大神教程一步步来的 ...

  6. ShareSDk的使用

    效果: 具体操作参考Mob官网shareSdk的文档 调用方法 public class MainActivity extends Activity { @Override protected voi ...

  7. vue （v-if show 问题）

    vue中的显示和隐藏有两种方式 1.v-if   ( 相当于动态创建的标签,在html 结构中,是不存在的. ) 2. v-show(控制的是 html 的css display:none  属性.结 ...

  8. POJ 2323 贪心

    题意: 思路: 贪 贪 贪 如果当前的c>之前的c+s 那么之前的合适 一直贪下去就好了 //By SiriusRen #include <cstdio> #include < ...

  9. Spark Tachyon的命令行使用

    Tachyon命令行使用 Tachyon接口说明 接口操作示例 copyFromLocal copyToLocal ls和lsr count cat mkdir.rm.rmr和touch pin和un ...

  10. Spark MLlib聚类KMeans

    算法说明 聚类(Cluster analysis)有时也被翻译为簇类,其核心任务是:将一组目标object划分为若干个簇,每个簇之间的object尽可能相似,簇与簇之间的object尽可能相异.聚类算 ...