<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. JSP中 input type 用法

    JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...

  2. wangEditor - 轻量级web富文本编辑器（可带图片上传）

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  3. RvmTranslator6.5 is released

    RvmTranslator6.5 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  4. 关于jquery点击之后，标签的hover失效这个问题

    做一个点击切换的效果,加在a标签上,jquery的click加上css中的hover 点击之后,css的hover效果就没有了,后来知道是click的权值比外联的css大 当点击之后,css代码就被覆 ...

  5. 如何解决Linux下的软件包依赖问题

    650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...

  6. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  7. xsy3320 string

    xsy3320 string 题意: ​ 给一颗树,每条边上有一个字符,求有多少条路径是回文的.(\(N\leq50000\),\(c\in\{1,2\}\)) 题解: ​ 前置芝士:回文前缀& ...

  8. 洛谷——P1311 选择客栈

    https://www.luogu.org/problem/show?pid=1311 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰 ...

  9. 洛谷 P1852 奇怪的字符串

    P1852 奇怪的字符串 题目描述 输入两个01串,输出它们的最长公共子序列的长度 输入输出格式 输入格式: 一行,两个01串 输出格式: 最长公共子序列的长度 输入输出样例 输入样例#1: 复制 0 ...

  10. Finance and Good Society

    Finance is a technology of great power. It plays an important role in our society which range from t ...