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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery操作css样式
May 15 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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转成EXE文件
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
php csv操作类代码
2009/12/14 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python如何输出整数
2020/06/07 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
传媒专业推荐信范文
2013/11/23 职场文书
军人违纪检讨书
2014/02/04 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2014年设计师工作总结
2014/11/25 职场文书
食堂管理制度范本
2015/08/04 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers