php+jquery+ajax异步批量上传图片文件，并显示进度条

以下是一个使用PHP、jQuery和Ajax实现的简单示例，用于批量上传图片文件，并显示进度条。

HTML 部分：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple>
    <button type="submit">上传</button>
</form>
<div id="progress">
    <!-- 进度条将被添加到这里 -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

JavaScript 部分 (jQuery)：

$(document).ready(function (e) {
    $('#uploadForm').ajaxForm({
        beforeSend: function() {
            $('#progress').html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>');
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var width = percentComplete + '%'; // 计算进度条的宽度
            $('.progress-bar').width(width).attr('aria-valuenow', percentComplete);
        },
        success: function() {
            // 成功上传后的回调函数
            alert('图片上传成功！');
        },
        error: function() {
            // 上传失败的回调函数
            alert('图片上传失败！');
        }
    });
});

PHP 部分 (upload.php):

<?php
if ($_FILES) {
    $total = count($_FILES['images']['name']); // 获取文件数量
 
    for ($i = 0; $i < $total; $i++) {
        $tmpFilePath = $_FILES['images']['tmp_name'][$i];
        if ($tmpFilePath != ""){
            // 设置文件名和路径
            $newFilePath = "uploads/" . $_FILES['images']['name'][$i];
 
            // 上传文件
            if (move_uploaded_file($tmpFilePath, $newFilePath)) {
                // 文件上传成功
            } else {
                // 文件上传失败
            }
        }
    }
    echo "上传成功";
} else {
    echo "没有文件上传";
}
?>

确保服务器配置允许文件上传，并设置了适当的 upload_max_filesize 和 post_max_size 值。

以上代码实现了基本的文件批量上传功能，并在上传过程中显示了进度条。实际应用时，你可能需要添加更多的错误处理、安全性检查和用户体验改进。