jQuery+ajax实现文件上传功能

最新推荐文章于 2024-03-11 17:21:06 发布

李大璟

最新推荐文章于 2024-03-11 17:21:06 发布

阅读量1.4k

点赞数

分类专栏： jQuery ajax 文章标签： jquery ajax 前端

本文链接：https://blog.csdn.net/weixin_38007986/article/details/111435088

版权

jQuery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

jQuery+ajax实现文件上传功能(显示文件上传进度)

具体实现步骤

定义UI结构,引入bootstrap的CSS文件和jQuery文件
给上传按钮绑定点击事件
验证是否选择了文件
向FormData中追加文件
使用ajax发起上传文件的请求
设置文件的路径
使用xhr获得文件上传的进度
当文件上传完成让进度条显示绿色

<style>
    #loading {
        width: 20px;
        height: 20px;
    }
    
    #img {
        display: block;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: #abcdef;
        opacity: .5;
    }
</style>

<body>
    <!--multiple可以选择多个文件  -->
    <input type="file" multiple name="" id="ipt" multiple><button id="btn" type="submit">上传文件</button>
    <img id="loading" src="../img/loading.gif" alt="" style="display: none;">
    <!-- bootstrap中引入条件 -->
    <div class="progress" style="margin-top: 10px;width: 100px;margin-left: 10px;">
        <div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            0%
        </div>
    </div>
    <!-- 显示上传到服务器的图片 -->
    <img src="" alt="" id="img" style="display: none;">
    <script src="../lib/jquery-1.11.0.min.js"></script>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                // 获取文件列表
                var file = $('#ipt')[0].files
                    // 判断是否选择了文件
                if (file.length <= 0) {
                    return alert('请上传文件')
                }
                // 创建formdata
                var fd = new FormData()
                    // 向formdata中传入数据
                    // fd.append()
                    // file是一个伪数组
                fd.append('avatar', file[0])
                    // 用ajax传送数据
                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    // 数据不需要编码
                    contentType: false,
                    // 数据对象不需要转换成键值对格式
                    processData: false,
                    data: fd,
                    beforeSend: function() {
                        $('#loading').show()
                    },
                    complete: function() {
                        $('#loading').hide()
                    },
                    success: function(res) {
                        // 判断是否接收成功
                        if (res.status !== 200) {
                            return alert(reg.msg)
                        }
                        $('#img').attr('src', 'http://www.liulongbin.top:3006' + res['url']).css('display', 'block')

                    },
                    xhr: function xhr() {
                        var xhr = new XMLHttpRequest()
                            //    获取文件上传的进度
                        xhr.upload.onprogress = function(e) {
                                // e.lengthComputable表示当前的进度是否是可以计算,返回布尔值
                                if (e.lengthComputable) {
                                    // e.loaded表示下载了多少数据, e.total表示数据总量
                                    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
                                        // 让进度条的宽度变化
                                    $('#progress').css('width', percentComplete)
                                        // 在进度条中显示百分比
                                    $('#progress').html(percentComplete + 'px')
                                }
                            }
                            // 文件加载完成
                        xhr.upload.onload = function() {
                            $('#progress').removeClass('progress-bar progress-bar-striped').addClass('progress-bar progress-bar-success')
                        }
                        return xhr
                    }

                })

            })

        })
    </script>
</body>

效果演示(slow3g状态)

在这里插入图片描述

李大璟

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
jQuery+ajax实现文件上传功能

jQuery+ajax实现文件上传功能(显示文件上传进度)具体实现步骤定义UI结构,引入bootstrap的CSS文件和jQuery文件给上传按钮绑定点击事件验证是否选择了文件向FormData中追加文件使用ajax发起上传文件的请求设置文件的路径使用xhr获得文件上传的进度当文件上传完成让进度条显示绿色<style> #loading { width: 20px; height: 20px; } #img
复制链接

扫一扫

专栏目录