【jquery ajax】实现文件上传提交
【摘要】 【jquery ajax】实现文件上传提交
JQuery实现文件上传提交
定义UI结构
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<input type="file" id="file1">
<button id="btnUpload">上传文件</button>
<img src="" alt="" style="width: 200px;" id="img1">
验证是否选择了文件
$('#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
<img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px">
$(document).ajaxStart(function () {
$('#loading').show()
})
$(document).ajaxStop(function () {
$('#loading').hide()
})
完整代码
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="file" id="file1">
<button id="btnUpload">上传文件</button>
<br>
<img src="" alt="" style="width: 200px;" id="img1">
<img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px">
<script>
//监听传输
$(document).ajaxStart(function () {
$('#loading').show()
})
$(document).ajaxStop(function () {
$('#loading').hide()
})
//建立单击事件
$('#btnUpload').on('click', function () {
let files = $('#file1')[0].files;
if (files.length <= 0) {
return alert('请选择文件后在上传')
}
//上传文件
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);
}
})
})
</script>
</body>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）