如何用jQuery与Ajax上传多文件及文本框？扩展多文件功能失效求解

导致上传流程完全失效的具体错误 #

• HTML规范错误：两个file类型的input设置了完全相同的id image，页面id必须全局唯一，重复id会导致DOM选择器无法正确匹配到第二个文件输入框
• JS代码错误：
  • 选择第二个文件输入框的逻辑完全失效：因为id重复，$('#image')[1]永远取不到第二个DOM元素
  • 属性名拼写错误：将文件列表的属性.files错写为.filess，运行时直接抛出未定义属性的JS错误，导致后续AJAX请求根本不会执行，这是整个上传流程失效的直接原因
• 后端容错缺失：PHP代码直接读取$_FILES和$_POST的字段值，没有做存在性判断，一旦前端传参缺失，会直接触发未定义索引的警告，中断脚本执行

修正后的可运行代码 #

前端 test.php #

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <div class='preview'><p class="temp"></p></div>
    <div>
        <input type="text" id="title" name="title" />
        <!-- 给两个file输入框设置唯一id，保持name和后端传参key一致 -->
        <input type="file" id="image1" name="image" />
        <input type="file" id="image2" name="image2" />
        <input type="button" class="button" value="Upload" id="but_upload">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#but_upload").click(function(){
            var fd = new FormData();
            // 匹配唯一的id获取对应文件框的文件列表
            var files1 = $('#image1')[0].files;
            var files2 = $('#image2')[0].files;
            var title = $("#title").val();

            // 仅当用户选中文件时才追加到FormData，避免空值报错
            if(files1.length > 0){
                fd.append('image', files1[0]);
            }
            if(files2.length > 0){
                fd.append('image2', files2[0]);
            }
            fd.append('title', title);

            $.ajax({
                url:'test2.php',
                type:'post',
                data:fd,
                contentType: false,
                processData: false,
                success:function(response){
                    if(response != 0){
                        $(".temp").html(response);
                        $('.preview').show();
                    }else{
                        alert('File not uploaded');
                    }
                }
            });
        });
    });
</script>

后端 test2.php #

<?php
$valid_extensions = array("jpg","jpeg","png");
$upload_dir = "images-main/post-images/";
$response = 0;

// 检查上传目录是否存在，不存在则自动创建
if(!is_dir($upload_dir)){
    mkdir($upload_dir, 0755, true);
}

// 校验文本框字段是否存在
if(!isset($_POST['title'])){
    echo 0;
    exit;
}
$title = $_POST['title'];

// 处理第一个文件上传
if(isset($_FILES['image'])){
    $filename = $_FILES['image']['name'];
    $location = $upload_dir.$filename;
    $imageFileType = strtolower(pathinfo($location,PATHINFO_EXTENSION));
    // 校验第一个文件的合法性
    if(in_array($imageFileType, $valid_extensions)){
        if(move_uploaded_file($_FILES['image']['tmp_name'], $location)){
            // 处理第二个文件上传
            if(isset($_FILES['image2'])){
                $filename2 = $_FILES['image2']['name'];
                $location2 = $upload_dir.$filename2;
                $imageFileType2 = strtolower(pathinfo($location2,PATHINFO_EXTENSION));
                if(in_array($imageFileType2, $valid_extensions)){
                    if(move_uploaded_file($_FILES['image2']['tmp_name'], $location2)){
                        $response = $title;
                    }
                }
            }
        }
    }
}

echo $response;
exit;

注意：需要确保images-main/post-images/目录有PHP进程的写入权限，否则文件会上传失败。

内容的提问来源于stack exchange，提问作者Tharun K