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

上传完成后会消失

相关阅读:
文献学习-4-面向机器人手术的基于数据驱动控制的连续体腹腔镜器械跟踪控制方法
数据结构之二叉树
基于SpringBoot的房屋租赁管理系统的设计与实现
UML图与List集合
【Docker】常用命令总结
NumPy sum、mean、cumsum 及参数 axis，keepdims，where 的含义
安装 eslint 配置指南及遇到的一些问题记录
【毕业设计】基于单片机的室内环境温湿度检测系统 - 物联网嵌入式 stm32
深度学习笔记_5 经典卷积神经网络LeNet-5 解决MNIST数据集
【Hadoop】学习笔记（八）

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