jquery+ajax实现异步上传文件显示进度条


Posted in jQuery onAugust 17, 2020

前言:

今天项目中加了一个上传文件加进度条的需求,我就搞了一下。时间宝贵不多说,直接进入正题。

异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心。

关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求)

var xhr=new XMLHttpRequest()//创建xhr对象
  xhr.open('请求方式','请求的地址')
  xhr.send()//发佛那个请求
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){//得到服务端返回的状态码
     console.log(xhr.responseText)//输出返回结果
    }
   }

介绍完xhr继续说上传文件的:(注意:在展示效果的时候,有一个知识点,就是css样式,一定要在添加的在<b>之前,否则当三上传的文件较小的时候,会不显示效果)

jquery+ajax实现异步上传文件显示进度条

//上传文件
$("#btnSubmit").click(function () {
 if (!(confirm("确定提交吗?"))) {
  return;
 }
 else {
  var formData = new FormData();//上传文件必须写的
  var fileNum = $("#file_input")[0].files.length;//上传文件的个数
  if (fileNum > 0) {
   var file = $("#file_input")[0].files;//拿到文件
   //console.log(file[0].name);文件名
   var nameSuffix = file[0].name.split(".");
   if (nameSuffix[nameSuffix.length - 1] != "zip") {
    alert("上传的文件不是zip类型的文件,请重新上传");
    $("#file_input").val("");//将选择的文件清除
   }//判断文件大小
   //else if ($("#file_input")[0].files[0].size / 1024 / 1024 > 1024) {
    //alert("请选择文件大小为1G以内文件");
    //$("#file_input").val("");
    //return;
   //}
   else {
    //formData.append(key,value)的值不能一样,否则只会拿到一个文件
    formData.append('file', file[0]);//拿到zip文件
    //console.log(formData.get('file'));查看添加到formData的文件
   }    
   $.ajax({
    url: 'https://www.baidu.com',//用百度测试的。哈哈
    type: 'post',
    async:true, //这里要设置异步上传,才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
    dataType: 'json',
    //Accept:'text/html;charset=UTF-8',
    processData: false,// 告诉jQuery不要去处理发送的数据
    contentType: false,// 告诉jQuery不要去设置Content-Type请求头,否则后端拿不到数据
    data: formData,
    xhr:function(){      
     var myXhr = $.ajaxSettings.xhr();
     if(myXhr.upload){ //检查上传的文件是否存在
      myXhr.upload.addEventListener('progress',function(e){       
       var loaded = e.loaded; //已经上传大小情况 
       var total = e.total; //附件总大小 
       var percent = Math.floor(100*loaded/total)+"%"; //已经上传的百分比 
       //console.log("已经上传了:"+percent); 
       //显示进度条    
       $("#content").css("width",percent).css("height",20).css("margin-top",8).css("backgroundColor","#33CCFF").css("color","white").html("<b>"+percent+"</b>");                                
      }, false); // for handling the progress of the upload
     }
     return myXhr;
    },     
    success:function(data){      
     alert("上传成功!!!!");      
    },
    error:function(){
     alert("上传失败!");
      //上传失败后清空div的样式和内容
     $("#content").css("width",0).css("height",0).css("margin-top",0).css("backgroundColor","").text("");
    }
   })
  }
  else {
   alert("请选择文件上传");
  }
 }
})

效果展示:

jquery+ajax实现异步上传文件显示进度条

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
jQuery实现雪花飘落效果
Aug 02 #jQuery
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
You might like
PHP学习之PHP表达式
2006/10/09 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
json 定义
2008/06/10 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python自动生成证件号的方法示例
2021/01/14 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
高中生学习的自我评价
2013/12/14 职场文书
自我评价200字分享
2013/12/17 职场文书
工作失误检讨书范文
2015/01/26 职场文书
博物馆观后感
2015/06/05 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Nginx反向代理、重定向
2022/04/13 Servers