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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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内存不够用的快速解决方法
2013/10/26 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
JavaScript基本对象
2007/01/11 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
土木工程应届生自荐信
2013/09/24 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
2014年部门工作总结
2014/11/12 职场文书
布达拉宫导游词
2015/02/02 职场文书
离婚被告代理词
2015/05/23 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers