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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
使用jQuery实现购物车
Oct 29 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 session劫持和防范的方法
2013/11/12 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python如何快速实现分布式任务
2017/07/06 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python实现快递价格查询系统
2020/03/03 Python
python同时遍历两个list用法说明
2020/05/02 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
董事长助理岗位职责
2014/02/18 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
教师求职信怎么写
2015/03/20 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Python实现信息管理系统
2022/06/05 Python