jQuery上传多张图片带进度条样式(DEMO)


Posted in Javascript onMarch 02, 2017

下面一段代码给大家分享jquery上传多种图片带进度条样式,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xhr2</title>
</head>
<body>
<div style="text-align: center; margin: 100px">
<input type="file" id="file" name="file" multiple="multiple">
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
<button onclick="xhr2()">OK</button>
</div>
<script>
function xhr2() {
var xhr = new XMLHttpRequest();//第一步
//定义表单变量
var file = document.getElementById('file').files;
//console.log(file.length);
//新建一个FormData对象
var formData = new FormData(); //++++++++++
formData.append("enctype","multipart/form-data");
//追加文件数据
for (i = 0; i < file.length; i++) {
formData.append("file[" + i + "]", file[i]); //++++++++++
}
//formData.append("file", file[0]); //++++++++++
//post方式
xhr.open('POST', '/common/doUpload'); //第二步骤
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
//发送请求
xhr.send(formData); //第三步骤
//ajax返回
xhr.onreadystatechange = function() { //第四步
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
//设置超时时间
xhr.timeout = 100000;
xhr.ontimeout = function(event) {
alert('请求超时!');
}
}
</script>
</body>
</html>

以上所述是小编给大家介绍的关于jQuery上传多张图片带进度条样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
jquery仿京东侧边栏导航效果
Mar 02 #Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 #Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 #Javascript
利用ES6语法重构React组件详解
Mar 02 #Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 #Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
You might like
php 正则表达式小结
2009/08/31 PHP
php文档更新介绍
2011/07/22 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
收入证明范本
2015/06/12 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Python List remove()实例用法详解
2021/08/02 Python