<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. selenium使用报错“selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.”

    安装了python3,使用pip安装了selenium,但是在使用时,报了“selenium.common.exceptions.WebDriverException: Message: 'gecko ...

  2. IDEA 官方教程

    https://www.jetbrains.com/help/idea/discover-intellij-idea.html#UserInterface

  3. 【Henu ACM Round #13 B】Spider Man

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现每个环可以操作的次数是固定的. (环的大小-1 也就是说一旦环确定了.其实结果就已经确定了. 则直接看操作总数的奇偶性就可以了 ...

  4. jmind-redis一个redis的nio客户端

    Redis是一个基于key/value的系统.Redis目前最新版本是2.2.4,用着很不错,不过java版本的客户端比较的不给力,目前redis 客户端jedis 是基于io 的socket . 而 ...

  5. es6 -- set 数据结构

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...

  6. Fedora Core 11 Alpha试用视频（由于youtube问题暂时无法访问）

    1.系统安装: http://www.youtube.com/watch?v=QcDy5eRQZ20   2.重启后配置   3.体验Fedora 11 Gnome2.25和Kde 4.2 http: ...

  7. BootStrap_table.js 学习

    @{ Layout = null; ViewBag.Title = "基于BootstrapTable的简单应用";} <!--添加相关样式引用--><link ...

  8. linux命令行打开图片

    1.用预装的eog eog a.jpg 2.安装 imagemagick display a.jpg

  9. svg(1) path路径

    注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/2707 ...

  10. 2017国家集训队作业[arc076d/f][Exhausted?]

    2017国家集训队作业[arc076d/f][Exhausted?] 题意: ​ 有\(N\)个人,\(M\)把椅子,给出\(...L_i.R_i\)表示第\(i\)个人可以选择编号为\(1\sim ...