jquery实现文件上传及loading加载效果

龙眸

已于 2022-07-10 17:52:41 修改

阅读量1.3k

点赞数

分类专栏： ajax 笔记文章标签： jquery javascript

于 2022-07-10 17:26:01 首次发布

本文链接：https://blog.csdn.net/weixin_52065872/article/details/125708184

版权

笔记同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

jQuery实现文件上传步骤

1、定义UI结构
2、验证是否选择了文件
3、向formdata中追加文件
4、使用jQuery的Ajax发起上传文件的请求

核心代码

1.ajaxStart(callback)
Ajax请求开始时，执行ajaxstart函数，可以在ajaxstart的callback中显示loading效果，
代码如下：

// 监听到Ajax请求被发起了
            $(document).ajaxStart(function() {
                $('#loading').show()
            })

2.ajaxStop(callback)
Ajax请求结束时，执行ajaxstop函数，可以在ajaxstop的callback中隐藏loading效果，
*代码如下：

 // 监听到Ajax请求完成了
            $(document).ajaxStop(function() {
                $('#loading').hide()
            })

1、定义UI结构
2、验证是否选择了文件

$('#btnUpload').on('click', function() {
                // 将jquery对象转换为DOM对象，并获取选中的文件列表
                var files = $('#file1')[0].files
                // 判断是否上传了文件
                if (files.length <= 0) {
                    return alert('请选择文件后再上传!')
                }

3、向formdata中追加文件

// 3.向formdata中追加文件
                var fd = new FormData()
                fd.append('avatar', files[0])

4、使用jQuery的Ajax发起上传文件的请求

 // 4.使用jQuery的ajax发起上传文件请求
                $.ajax({
                    method: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    // 不修改contenttype属性，使用formdata默认的contenttype值
                    contentType: false,
                    // 不对formdata中的数据进行URL编码，而是将formdata数据原样发送到服务器
                    processData: false,
                    success: function(res) {
                        console.log(res);
                    }

代码如下

<!DOCTYPE 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>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <!-- 1.定义UI结构 -->
    <input type="file" id="file1">
    <button id="btnUpload">提交</button>
    </br>
    <!-- 添加loading加载效果 -->
    <img src="./images/loading.gif" alt="" style="display: none;" id="loading">
    <script>
        $(function() {
            // 监听到Ajax请求被发起了
            $(document).ajaxStart(function() {
                $('#loading').show()
            })
            // 监听到Ajax请求完成了
            $(document).ajaxStop(function() {
                $('#loading').hide()
            })
            // 2.验证是否选择了文件
            $('#btnUpload').on('click', function() {
                // 将jquery对象转换为DOM对象，并获取选中的文件列表
                var files = $('#file1')[0].files
                // 判断是否上传了文件
                if (files.length <= 0) {
                    return alert('请选择文件后再上传!')
                }
                // 3.向formdata中追加文件
                var fd = new FormData()
                fd.append('avatar', files[0])
                // 4.使用jQuery的ajax发起上传文件请求
                $.ajax({
                    method: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    // 不修改contenttype属性，使用formdata默认的contenttype值
                    contentType: false,
                    // 不对formdata中的数据进行URL编码，而是将formdata数据原样发送到服务器
                    processData: false,
                    success: function(res) {
                        console.log(res);
                    }

                })
            })
        })
    </script>
</body>

</html>

龙眸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现文件上传及loading加载效果

1、定义UI结构2、验证是否选择了文件3、向formdata中追加文件4、使用jQuery的Ajax发起上传文件的请求1.ajaxStart(callback)Ajax请求开始时，执行ajaxstart函数，可以在ajaxstart的callback中显示loading效果，代码如下：2.ajaxStop(callback)Ajax请求结束时，执行ajaxstop函数，可以在ajaxstop的callback中隐藏loading效果，...
复制链接

扫一扫