基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

下面是详细的攻略：

HTML5 Ajax文件上传进度条实现

HTML5提供了新的文件上传方式——FormData，它可以发送multipart/form-data格式的请求，而不需要使用传统的表单方式。这种方式可以通过Ajax方式上传数据，同时可以实现文件上传的进度条显示。

下面我们将基于jQuery来使用HTML5 Ajax文件上传进度条实现。

1. 创建表单

首先我们需要创建表单，可以使用一个普通的HTML表单：

<form action="upload.php" method="post" enctype="multipart/form-data" id="fileForm">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit">
</form>

在该表单中，我们创建了一个文件上传控件和一个提交按钮。

2. 编写JavaScript代码

接下来，我们需要使用JavaScript代码来完成文件上传，并显示进度条。

我们将使用jQuery来完成Ajax的调用。因此，我们首先需要在页面中引用jQuery库：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后，我们在页面中添加如下的JavaScript代码：

$(document).ready(function() {
    $('#fileForm').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交
        var formData = new FormData(this); // 将表单数据转换为FormData
        $.ajax({
            url : 'upload.php', // 上传地址
            type : 'POST', // 请求方式
            data : formData, // 表单数据
            processData : false, // 禁止处理表单数据
            contentType : false, // 不设置Content-Type请求头
            xhr : function() {
                // 创建XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                if(xhr.upload) {
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = Math.round(event.loaded / event.total * 100); // 计算进度百分比
                        $('#progressBar').css('width', percent + '%').text(percent + '%'); // 更新进度条显示
                    }, false);
                }
                return xhr;
            },
            success : function(response) {
                alert(response); // 显示上传结果
            }
        });
    });
});

在该代码中，我们首先使用jQuery的ready()方法来确保页面加载完毕后再执行代码。然后，我们使用submit()方法来捕获表单提交事件，并使用preventDefault()方法来阻止表单默认提交。

接下来，我们创建一个FormData对象，并将表单数据传入其中。

然后，我们使用jQuery的ajax()方法来进行Ajax调用。其中，url属性指定请求地址，type属性指定请求方式，data属性指定表单数据（即FormData对象），processData属性设置为false表示不处理表单数据，contentType属性设置为false表示不设置Content-Type请求头。

我们通过xhr()方法来获取XMLHttpRequest对象，并通过addEventListener()方法来监听文件上传事件progress，并计算进度百分比，更新进度条的显示。

最后，我们通过success方法来指定请求成功后的回调函数。回调函数中显示上传结果。

3. 创建进度条

在HTML中，我们需要创建一个用于显示进度条的元素。可以使用如下的HTML代码：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressBar">
        0%
    </div>
</div>

在CSS中，我们可以添加如下的样式：

.progress {
    height: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

通过上述样式，我们创建了一个宽度为0的进度条元素。当上传文件时，通过JavaScript代码中的$('#progressBar').css('width', percent + '%').text(percent + '%');语句来更新进度条的显示。

4. 示例说明

示例1：上传单个文件

按照上述方法创建HTML和JavaScript代码，即可实现上传单个文件并显示进度条。

示例2：上传多个文件

如果需要上传多个文件，可以通过以下方式修改HTML代码：

<form action="upload.php" method="post" enctype="multipart/form-data" id="fileForm">
    <input type="file" name="fileToUpload[]" id="fileToUpload" multiple>
    <input type="submit" value="Upload Files" name="submit">
</form>

在该表单中，我们添加了multiple属性来支持上传多个文件，并将文件上传控件的name属性设置为fileToUpload[]，表示该控件可以上传多个文件。

接下来，修改JavaScript代码中的FormData对象创建方法，使其支持上传多个文件：

var formData = new FormData();
$.each($('#fileToUpload')[0].files, function(i, file) {
    formData.append('fileToUpload[]', file);
});

通过以上修改，即可实现上传多个文件并显示进度条。

总结

本攻略中，我们使用了HTML5、JavaScript和jQuery来实现Ajax文件上传进度条的功能。通过这种方式，可以使用户更直观地了解到文件上传的进度和结果，提高用户体验。