jquery+ajax实现异步上传文件显示进度条
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery+ajax实现异步上传文件显示进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：
今天项目中加了一个上传文件加进度条的需求，我就搞了一下。时间宝贵不多说，直接进入正题。
异步上传文件是要用到ajax里的一个小的知识点：xhr（XML Http Request）一个对象，xhr对象也是ajax一个核心。
关于使用它也很简单：就四步（狼蚁网站SEO优化这样写也可以向后端进行发送请求）
var xhr=new XMLHttpRequest()//创建xhr对象
xhr.open('请求方式','请求的地址')
xhr.send()//发佛那个请求
xhr.onreadystatechange=function(){
if (xhr.readyState==4){//得到服务端返回的状态码
console.log(xhr.responseText)//输出返回结果
}
}
介绍完xhr继续说上传文件的：（注意：在展示效果的时候，有一个知识点，就是css样式，一定要在添加的在<b>之前，否则当三上传的文件较小的时候，会不显示效果）
//上传文件
$("#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;
/ 上一篇：Vuex实现购物车小功能
下一篇：jQuery实现异步上传一个或多个文件