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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery 动画与停止动画效果实例详解
May 19 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
详解Document.Cookie
2015/12/25 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Python中为什么要用self探讨
2015/04/14 Python
Python求导数的方法
2015/05/09 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python文件操作的简单方法总结
2019/11/07 Python
django 外键创建注意事项说明
2020/05/20 Python
python中rc1什么意思
2020/06/19 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
校园元旦活动总结
2014/07/09 职场文书
教导主任个人总结
2015/03/03 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
光荣之路观后感
2015/06/12 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers