jQuery Ajax Progress 教程

最新推荐文章于 2024-08-24 09:28:48 发布

郎凌队Lois

最新推荐文章于 2024-08-24 09:28:48 发布

阅读量747

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00745/article/details/141417519

版权

jQuery Ajax Progress 教程

jquery-ajax-progressSimple patch that adds a 'progress' callback to jquery Ajax calls项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ajax-progress

项目介绍

jQuery Ajax Progress 是一个开源项目，旨在为 jQuery 的 AJAX 请求添加进度跟踪功能。通过这个插件，开发者可以轻松地监控文件上传和下载的进度，从而提升用户体验。该项目由 englercj 开发并维护，适用于需要在网页中显示进度条的场景。

项目快速启动

安装

首先，你需要将 jQuery Ajax Progress 插件添加到你的项目中。你可以通过以下方式进行安装：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://github.com/englercj/jquery-ajax-progress/releases/download/v0.4.0/jquery.ajaxProgress.min.js"></script>

使用示例

以下是一个简单的示例，展示如何使用 jQuery Ajax Progress 插件来监控文件上传的进度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax Progress 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://github.com/englercj/jquery-ajax-progress/releases/download/v0.4.0/jquery.ajaxProgress.min.js"></script>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="上传" />
    </form>
    <div id="progressBar" style="width: 300px; height: 20px; border: 1px solid #ccc;"></div>

    <script>
        $(document).ready(function() {
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                $('#progressBar').css('width', percentComplete + '%').html(percentComplete.toFixed(2) + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(data) {
                        alert('上传成功！');
                    },
                    error: function(xhr, status, error) {
                        alert('上传失败：' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>