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 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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实现微信扫码自动登陆与注册功能
2016/09/22 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python小程序实现刷票功能详解
2019/07/17 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
先进班级集体事迹材料
2014/01/30 职场文书
国旗下演讲稿
2014/05/08 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
2014年信用社工作总结
2014/11/25 职场文书
师德先进个人材料
2014/12/20 职场文书
求职自我评价参考范文
2019/05/16 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python