ajax上传进度条
<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上传进度条的更多相关文章
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- spring定时任务-文件上传进度条
spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...
- Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
- iOS_文件上传进度条的实现思路-AFNettworking
iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...
- asp.net文件上传进度条研究
文章:asp.net 文件上传进度条实现代码
- Layui多文件上传进度条
Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...
随机推荐
- 基于zookeeper实现分布式配置中心（二）
上一篇(基于zookeeper实现分布式配置中心(一))讲述了zookeeper相关概念和工作原理.接下来根据zookeeper的特性,简单实现一个分布式配置中心. 配置中心的优势 1.各环境配置集中 ...
- UVALive 6869 Repeated Substrings
Repeated Substrings Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Descri ...
- Linux局域网登陆响应时间过长
在局域网中,使用ssh登陆到其他机器上时,有时会出现等待10s以上才能正常登陆的问题. 原因: Linux默认使用dns解析登陆IP,但是在局域网,并没有dns服务器,而且机器上也没有添加 IP与域名 ...
- iOS项目开发实战——学会使用TableView列表控件（二）
要在iOS开发中使用TableView列表控件,不仅能够直接使用TableViewController作为整个主界面,并且还能够使用TableView控件来实现.使用TableView能够进行很多其它 ...
- Node.js转化GBK编码 - iconv-lite
node当使用node获取GBK编码的数据时,nodejs仅仅支持utf-8,node没有提供转换编码的原生支持,有倒是有一个模块iconv能干这个事,但须要本地方法,VC++库的支持.国外有个大牛写 ...
- android5.x加入sim1,sim2标识
1,mobile_signal_group.xml ..... <FrameLayout android:id="@+id/mobile_combo" android:la ...
- Android官方文档翻译——Fragment生命周期
网上有的博客写得太乱 不如自己翻译官方文档 Lifecycle 生命周期 Though a Fragment's lifecycle is tied to its owning activity, i ...
- 【DRF视图】
目录 开始使用内置视图 请结合[DRF序列化]此文献中的数据文件及序列化文件来阅读如下代码. DRF视图为我们提供了非常简便的方法--内置了增删改查等一系列的操作. 我们只需在url中指定对应的方法, ...
- nice---进程优先级
在当前程序运行优先级基础之上调整指定值得到新的程序运行优先级,用新的程序运行优先级运行命令行"command [arguments...]".优先级的范围为-20 - 19 等40 ...
- 百度Echarts-免费的商业产品图表库
官方网站:http://echarts.baidu.com/ 民间网站:http://fansunion.cn/echarts/ 下载地址:https://codeload.github.com/ec ...