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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery轮播图插件使用方法详解
Jul 31 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
php session安全问题分析
2011/06/24 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php设计模式之委托模式
2016/02/13 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
快速了解python leveldb
2018/01/18 Python
详解python3中tkinter知识点
2018/06/21 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python实现疫情地图可视化
2021/02/05 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
大专会计自我鉴定
2014/02/06 职场文书
银行职员自我鉴定
2014/04/20 职场文书
优秀高中学生评语
2014/12/30 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers