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 学习笔记(onchange等)
Nov 14 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
原生js实现日历效果
Mar 02 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python 批量修改/替换数据的实例
2018/07/25 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
学校介绍信范文
2014/01/14 职场文书
年度考核评语
2014/01/19 职场文书
营销总经理岗位职责
2014/02/02 职场文书
领导党性分析材料
2014/02/15 职场文书
公司活动总结范文
2014/07/01 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年工会工作总结
2014/11/12 职场文书
留学推荐信英文范文
2015/03/26 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python