6.jQuery中的Ajax上传文件

1 上传文件

2 loading效果

1 上传文件

后端接到数据后保存在upload_file文件夹下

前端依然使用FormData处理文件

contentType:false的意思是使用FormData默认的Content-Type值

processData:false的意思是不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器

2 loading效果

需要先搞一个这样的gif

让其在上传开始时显示，其余时间不显示


html>
<html lang="en">
<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>Documenttitle>
    <style>
        img {
            display:none;
            width:200px;
            height:200px;
        }
    style>
head>
<body>
    <input type="file">
    <button>上传文件button>
    <img src="loading.gif" alt="">
body>
<script src="../../jquery-3.6.1.min.js">script>
<script>
    $(document).ajaxStart(function() {
        $('img').show()
    })
 
    $(document).ajaxStop(function() {
        $('img').hide()
    })
 
 
    $('button').on('click',function() {
        files = $('input')[0].files
        if (files.length <= 0) {
            return alert('请选择要上传的文件')
        }
 
        FormData_obj = new FormData()
        FormData_obj.append('file',files[0])
 
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:5000/upload',
            data:FormData_obj,
            contentType:false,
            processData:false,
            success:function(res) {
                console.log(res)
            }
        })
    })
script>
html>

Ajax请求开始时会执行ajaxStart()，自jQuery1.8后，ajaxstart()只能给document，因为只能给document所以ajaxStart会监听当前document内所有的Ajax请求

Ajax请求结束时会执行ajaxStop()

除此之外还有很多请求的方法，详细可以看一下文档 jQuery 参考手册 - Ajax

上传过程中会显示loading.gif

上传完成后会消失

相关阅读:
实时数据传输：Django 与 MQTT 的完美结合
喜讯 | 怿星科技获评SAE“优秀核心零部件企业”，测试软件平台工具广受赞誉
如何PDF转Word文档？两分钟教你三个方法
ggplot画热图合并细胞组合细胞单细胞基因整体表达量合并多个细胞整体表达量条形热图合并热图
【JS 判断数组是否包含某个元素】
喜讯！云起无垠入选《2023年中国AIGC创新企业榜》
从零开始搭建仿抖音短视频APP--开发用户业务模块（4）
UsernamePasswordAuthenticationFilter执行流程
【MySQL】21-MySQL之增删改
Fortran捕捉浮点数非法运算

原文地址：https://blog.csdn.net/potato123232/article/details/128037387