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单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 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
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
python 图片验证码代码分享
2012/07/04 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
使用python绘制温度变化雷达图
2019/10/18 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
母亲节感恩活动记录
2014/03/16 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
高中语文教学反思范文
2016/02/16 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis