一个简单的ajax上传进度显示示例

当然，下面是一个使用JavaScript和AJAX进行文件上传，并显示上传进度的简单示例。这个示例使用了`XMLHttpRequest`对象来实现文件的异步上传，并监听进度事件来更新进度条。

HTML部分（用于显示上传按钮和进度条）：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX文件上传进度示例</title>
<style>
    #progressBar {
        width: 0%;
        height: 20px;
        background-color: #4CAF50;
        text-align: center;
        line-height: 20px;
        color: white;
        transition: width 0.4s ease-in-out;
    }
</style>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">上传文件</button>
    <div id="progressBar" style="width:0%;">0%</div>

    <script>
        // JavaScript部分将放在这里
    </script>
</body>
</html>

JavaScript部分（添加在上面的`

请注意，这个示例中的`/upload`是服务器接收文件的URL，你需要根据你的实际服务器设置来修改这个URL。同时，服务器需要能够处理`multipart/form-data`类型的POST请求，并适当地响应上传请求。

这个示例中，我们使用了`XMLHttpRequest`的`upload.onprogress`事件来监听上传进度，并通过更新`

`元素的宽度和文本来显示进度。当上传完成后，我们通过检查`xhr.status`来判断上传是否成功，并在控制台中输出相应的信息。