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源码】
Apr 10 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现动态加载瀑布流
Sep 01 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 Opcache安装和配置方法介绍
2015/05/28 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
python数据结构之图的实现方法
2015/07/08 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python找出最小的K个数实例代码
2018/01/04 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
升职演讲稿范文
2014/05/23 职场文书
工地安全质量标语
2014/06/07 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
大二学年个人总结
2015/03/03 职场文书
《落花生》教学反思
2016/02/16 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS