推荐一个强大的前端文件上传进度条插件：jQuery.uploadProgress

jQuery.uploadProgress 插件不是一个官方的 jQuery 插件，它可能是一个第三方插件，用于显示文件上传进度。然而，在我知识更新的时间点（2023年），没有找到相关的官方文档或者可靠的资源。

如果你已经有了这个插件，你可以通过以下方式来使用它：

确保你的页面包含了 jQuery 库和 jQuery.uploadProgress 插件。
使用表单的 HTML 标签来选择文件，并设置 enctype 属性为 multipart/form-data。
使用 AJAX 来提交表单，并通过 $.uploadProgress 插件来监听上传进度。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Progress Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 假设 jQuery.uploadProgress.js 已经被包含或者引用 -->
</head>
<body>
    <form id="uploadForm" action="upload_url" method="post" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </form>
 
    <script>
        $(document).ready(function() {
            $('#uploadForm').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        // 使用 uploadProgress 插件来监听上传进度
                        $.uploadProgress(xhr, {
                            // 进度更新的回调函数
                            progress: function(progress) {
                                console.log('Upload progress:', progress);
                                // 这里可以更新进度条的显示
                            },
                            // 上传完成的回调函数
                            success: function() {
                                console.log('Upload success');
                            },
                            // 上传出错的回调函数
                            error: function() {
                                console.log('Upload error');
                            }
                        });
                        return xhr;
                    },
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    cache: false
                });
            });
        });
    </script>
</body>
</html>

请注意，由于 jQuery.uploadProgress 不是一个官方插件，你需要确保它已经被正确加载到你的项目中，并且它的 API 与上述代码片段

推荐一个强大的前端文件上传进度条插件：jQuery.uploadProgress

评论已关闭

推荐阅读