jq php 上传进度条

要在 PHP 中实现上传进度条，可以使用以下步骤：

1. 在 HTML 表单中添加一个文件上传字段和一个提交按钮：

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

2. 在 upload.php 文件中处理文件上传并显示进度条：

<?php
if(isset($_POST['submit'])){
    $file = $_FILES['file'];

    // 获取文件信息
    $fileName = $file['name'];
    $fileTmpName = $file['tmp_name'];
    $fileSize = $file['size'];
    $fileError = $file['error'];

    // 设置上传目录
    $uploadDirectory = 'uploads/';

    // 移动文件到上传目录
    if(move_uploaded_file($fileTmpName, $uploadDirectory . $fileName)){
        echo 'File uploaded successfully.';
    }else{
        echo 'Error uploading file.';
    }
}
?>

3. 现在，我们将添加上传进度条功能。首先，我们需要使用 Ajax 发送文件到服务器，以便在上传过程中获取进度信息。在 upload.php 文件中添加以下代码：

<?php
if(isset($_POST['submit'])){
    $file = $_FILES['file'];

    // 获取文件信息
    $fileName = $file['name'];
    $fileTmpName = $file['tmp_name'];
    $fileSize = $file['size'];
    $fileError = $file['error'];

    // 设置上传目录
    $uploadDirectory = 'uploads/';

    // 创建唯一的文件名
    $fileExtension = pathinfo($fileName, PATHINFO_EXTENSION);
    $newFileName = uniqid() . '.' . $fileExtension;

    // 移动文件到上传目录
    if(move_uploaded_file($fileTmpName, $uploadDirectory . $newFileName)){
        echo 'File uploaded successfully.';
    }else{
        echo 'Error uploading file.';
    }
}
?>

4. 接下来，我们将使用 jQuery 发送 Ajax 请求，并在上传过程中获取进度信息。在 HTML 页面中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('form').submit(function(event){
        event.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = new window.XMLHttpRequest();

                // 监听上传进度
                xhr.upload.addEventListener('progress', function(event){
                    if(event.lengthComputable){
                        var percent = Math.round((event.loaded / event.total) * 100);
                        $('.progress-bar').width(percent + '%').text(percent + '%');
                    }
                }, false);

                return xhr;
            },
            success: function(response){
                $('.progress-bar').width('100%').text('100%');
                alert(response);
            }
        });
    });
});
</script>

5. 最后，我们需要在 HTML 页面中添加一个进度条元素：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
</div>

现在，当用户选择文件并点击上传按钮时，文件将以 Ajax 方式上传到服务器，并显示上传进度条。