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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现拖拽小方块效果
Dec 10 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 include,include_once,require,require_once
2008/09/05 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP制作万年历
2015/01/07 PHP
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
微信小程序如何自定义table组件
2019/06/29 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python实现二叉搜索树
2016/02/03 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python常用的json标准库
2019/02/19 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python操作qml对象过程详解
2019/09/26 Python
Python PyQt5整理介绍
2020/04/01 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
邮政员工辞职信
2014/01/16 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
文明之星事迹材料
2014/05/09 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
保护校园环境倡议书
2015/04/28 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书