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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python下singleton模式的实现方法
2014/07/16 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python代码过长的换行方法
2018/07/19 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
C#面试题问题集
2016/04/02 面试题
电焊工岗位工作职责
2014/07/09 职场文书
单位委托书怎么写
2014/08/02 职场文书
国际会计专业求职信
2014/08/04 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
财政局长个人总结
2015/03/04 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript