✍️ 作者简介: 前端新手学习中。

 作者主页: 作者主页查看更多前端教学

 专栏分享：css重难点教学   Node.js教学 从头开始学习   ajax学习

在这里看原生ajax实现文件上传

文章目录

JQuery实现文件上传提交  定义UI结构  验证是否选择了文件  向FormData中追加文件并发起ajax请求  jquery实现loading效果  完整代码

JQuery实现文件上传提交

  定义UI结构

javascript 前端 【jquery ajax】实现文件上传提交 第1张

  验证是否选择了文件

$('#btnUpload').on('click', function () {

let files = $('#file1')[0].files;

if (files.length <= 0) {

return alert('请选择文件后在上传')

}

})

  向FormData中追加文件并发起ajax请求

//上传文件

let fd = new FormData();

fd.append('avator', files[0]);

//发起jquery ajax请求

$.ajax({

method: 'post',

url: 'http://www.liulongbin.top:3006/api/upload/avatar',

data: fd,

processData: false,

contentType: false,

success: function (res) {

alert('上传成功')

$('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url)

console.log(res.url);

}

})

  jquery实现loading效果

ajaxStart（callback） Ajax请求开始时，执行ajaxStart函数，可以在ajaxStart的callback中显示loading效果。 自jqueyr版本1.8起，该方法只能被附加到文档，$(document).ajaxStart()函数会监听文档内所有ajax请求,当ajax请求开始会触发这个函数，ajax结束则会触发ajaxStop

$(document).ajaxStart(function () {

$('#loading').show()

})

$(document).ajaxStop(function () {

$('#loading').hide()

})

  完整代码

Document


javascript 前端 【jquery ajax】实现文件上传提交 第1张

查看原文