jquery实现上传文件进度条


Posted in jQuery onMarch 26, 2020

本文实例为大家分享了jquery实现上传文件进度条的具体代码,供大家参考,具体内容如下

首先引入需要的js  css

用bootstrap进度条

<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" >
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

前端页面

<form id="uploadFile" action="uploadFile" enctype="multipart/form-data">
 <input type="file" name="file">
 <input type="button" value="上传" id="uplodsss">
 </form>
 <div class="progress">
 <div id="uploadFile_progressBar" class="progress-bar" role="progressbar" aria-valuenow="60" 
 aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
 <span id="uploadFile_rate">0%</span>
 </div>
 </div>

js

<script type="text/javascript">
$(function(){
 $("#uplodsss").click(function(){
 debugger
 $('#uploadFile').ajaxSubmit({
  type:'post', 
  url:"uploadFile", 
  processData: false, //需设置为false,因为data值是FormData对象,不需要对数据做处理
  contentType: false, //需设置为false,因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
  resetForm: true, //成功提交后,是否重置所有表单元素的值
 uploadProgress: function (event, position, total, percentComplete) {
 if(percentComplete > 100){
 percentComplete = 100;
 }
 var percentVal = percentComplete + '%'; 
 $("#uploadFile_rate").html(percentVal); // 文件上传进度显示值
 $("#uploadFile_progressBar").width(percentVal); // 进度条状态
 
 }, 
 success:function(data){
 alert("上传文件成功!");
  $("#uploadFile_progressBar").width("0px"); // 进度条状态
  $("#uploadFile_rate").html("0%");
  },
  error:function(){ 
  alert("上传文件失败,请重试!");
  }
 });
 });
})
</script>

需要jquery.form.js,下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
You might like
PHP函数http_build_query使用详解
2014/08/20 PHP
php中Ctype函数用法详解
2014/12/09 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
webpack打包js的方法
2018/03/12 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python读写unicode文件的方法
2015/07/10 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
2015年商场工作总结
2015/04/27 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python