jQuery+ajax实现文件上传功能


Posted in jQuery onDecember 22, 2020

jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下

具体实现步骤

1、定义UI结构,引入bootstrap的CSS文件和jQuery文件
2、给上传按钮绑定点击事件
3、验证是否选择了文件
4、向FormData中追加文件
5、使用ajax发起上传文件的请求
6、设置文件的路径
7、使用xhr获得文件上传的进度
8、当文件上传完成让进度条显示绿色

<style>
 #loading {
 width: 20px;
 height: 20px;
 }
 
 #img {
 display: block;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-color: #abcdef;
 opacity: .5;
 }
</style>

<body>
 <!--multiple可以选择多个文件 -->
 <input type="file" multiple name="" id="ipt" multiple><button id="btn" type="submit">上传文件</button>
 <img id="loading" src="../img/loading.gif" alt="" style="display: none;">
 <!-- bootstrap中引入条件 -->
 <div class="progress" style="margin-top: 10px;width: 100px;margin-left: 10px;">
 <div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
 0%
 </div>
 </div>
 <!-- 显示上传到服务器的图片 -->
 <img src="" alt="" id="img" style="display: none;">
 <script src="../lib/jquery-1.11.0.min.js"></script>
 <script>
 $(function() {
 $('#btn').on('click', function() {
 // 获取文件列表
 var file = $('#ipt')[0].files
  // 判断是否选择了文件
 if (file.length <= 0) {
  return alert('请上传文件')
 }
 // 创建formdata
 var fd = new FormData()
  // 向formdata中传入数据
  // fd.append()
  // file是一个伪数组
 fd.append('avatar', file[0])
  // 用ajax传送数据
 $.ajax({
  type: 'post',
  url: 'http://www.liulongbin.top:3006/api/upload/avatar',
  // 数据不需要编码
  contentType: false,
  // 数据对象不需要转换成键值对格式
  processData: false,
  data: fd,
  beforeSend: function() {
  $('#loading').show()
  },
  complete: function() {
  $('#loading').hide()
  },
  success: function(res) {
  // 判断是否接收成功
  if (res.status !== 200) {
  return alert(reg.msg)
  }
  $('#img').attr('src', 'http://www.liulongbin.top:3006' + res['url']).css('display', 'block')

  },
  xhr: function xhr() {
  var xhr = new XMLHttpRequest()
  // 获取文件上传的进度
  xhr.upload.onprogress = function(e) {
  // e.lengthComputable表示当前的进度是否是可以计算,返回布尔值
  if (e.lengthComputable) {
   // e.loaded表示下载了多少数据, e.total表示数据总量
   var percentComplete = Math.ceil((e.loaded / e.total) * 100)
   // 让进度条的宽度变化
   $('#progress').css('width', percentComplete)
   // 在进度条中显示百分比
   $('#progress').html(percentComplete + 'px')
  }
  }
  // 文件加载完成
  xhr.upload.onload = function() {
  $('#progress').removeClass('progress-bar progress-bar-striped').addClass('progress-bar progress-bar-success')
  }
  return xhr
  }

 })

 })

 })
 </script>
</body>

效果演示(slow3g状态)

jQuery+ajax实现文件上传功能

jQuery+ajax实现文件上传功能

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

jQuery 相关文章推荐
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python中文编码问题小结
2014/09/28 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
教师求职推荐信范文
2013/11/20 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
大学专科自荐信
2014/06/17 职场文书
安全生产会议制度
2015/08/06 职场文书
小学语文教学反思范文
2016/03/03 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL