<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. tensorflow学习之路----保存和提取数据

    #保存数据注意他只能保存变量,不能保存神经网络的框架.#保存数据的作用:保存权重有利于下一次的训练,或者可以用这个数据进行识别#np.arange():arange函数用于创建等差数组,使用频率非常高 ...

  2. 及格的产品vs优秀的产品

    类似的产品,做了同样的一个功能,但是,我们还是可以很明显的感受到不同,这种不同我们常常把他叫做「用户体验」. 来看看2组类似产品相似功能的设计: 识别到歌名vs还可以滚动展示歌词 在很早的时候就存在一 ...

  3. HDU——T 1075 What Are You Talking About

    http://acm.hdu.edu.cn/showproblem.php?pid=1075 Time Limit: 10000/5000 MS (Java/Others)    Memory Lim ...

  4. Spark 性能相关參数配置具体解释－任务调度篇

    作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ 随着Spark的逐渐成熟完好, ...

  5. POJ2823 Sliding Window【双端队列】

    求连续的k个中最大最小值,k是滑动的,每次滑动一个 用双端队列维护可能的答案值 假设要求最小值,则维护一个单调递增的序列 对一開始的前k个,新增加的假设比队尾的小.则弹出队尾的,直到新增加的比队尾大. ...

  6. 一步一步跟我学hadoop(1)----hadoop概述和安装配置

    这几年云计算大数据非常火,借这个东风.今天開始学习apache的分布式计算框架hadoop,希望不要太落后. Hadoop说明 对于hadoop.apache官方wiki给出的说明为 Apache H ...

  7. app 设计原则 ,步骤

    原则1:用户没精力研究你的应用.假设一開始不能非常清楚地了解某个应用,不能非常快上手应用.用户就要丢弃这个应用了 原则2:要让用户一眼就知道应用的核心功能和用法 原则3:减少认知负荷,千万不能让客户去 ...

  8. JSP从选择到放弃

    JSP为什么会出现?出现的原因? ①因为在开发web网站时候,返现servlet做界面比较麻烦,于是出现了jsp. 运行在服务端(Java server pages)基于servlet,对servle ...

  9. 关于router-link的传参以及参数的传递

    1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}& ...

  10. SpringMVC的注解方式

    mvc-servlet.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...