【jquery ajax】实现文件上传提交

本文档详细介绍了如何使用JQuery实现文件上传功能,包括UI结构定义、文件选择验证、FormData使用以及通过ajax发送文件。同时,展示了利用jQuery的ajaxStart和ajaxStop方法实现上传过程中的loading效果,确保用户界面的交互体验。
摘要由CSDN通过智能技术生成

csdn动态图标

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

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

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

在这里看原生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>

请添加图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坚毅的小解同志

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值