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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
一文了解Vue中的nextTick
May 06 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
利用js实现简单开关灯代码
Nov 23 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计算2点经纬度之间的距离代码
2013/08/12 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP常用技巧汇总
2016/03/04 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
简单JS代码压缩器
2006/10/12 Javascript
表单内同名元素的控制
2006/11/22 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python:slice与indices的用法
2019/11/25 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
物流仓管员工作职责
2014/01/06 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
升职自荐信范文
2015/03/27 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
小学作文之描写天气
2019/08/15 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Redis批量生成数据的实现
2022/06/05 Redis