php - 使用jquery上传多张图片

Question

这是我的代码，我有多个输入字段，所以我想在提交后上传图像，但这样只有第二个图像被上传。

表单页面

<script>
    function sendimg() {
        alert("ok");
        var newname = $('#txtname').val();
        var file_data1 = $('#inputfile1').prop('files')[0];
        var file_data2 = $('#inputfile2').prop('files')[0];
        var form_data = new FormData();                     // Create a form
        form_data.append('inputfile[]', file_data1);
        form_data.append('inputfile[]', file_data2);

        $.ajax({
            url: "img2.php",
            type: 'post',
            cache: false,
            contentType: false,
            processData: false,
            data: {form_data, name:newname},
            success: function (response) {
                alert(response);
            }
        });
    }
</script>
<input type='file' name='inputfile[]' id='inputfile1'>
<input type='file' name='inputfile[]' id='inputfile2'>
<input class="button" type="button" id="post_ad_btn" name="post_ad_btn"  value="POST AD" onclick="sendimg();">

上传.php

$src = $_FILES['inputfile'][0]['tmp_name'];
$targ = "../".$_FILES['inputfile'][0]['name'];
move_uploaded_file($src, $targ);

$src = $_FILES['inputfile'][1]['tmp_name'];
$targ = "../".$_FILES['inputfile'][1]['name'];
move_uploaded_file($src, $targ);

Answer 1

        form_data.append('inputfile', file_data1);
        form_data.append('inputfile', file_data2); 

您正在覆盖旧值。要通过 POST 将数组发送到 PHP，您需要将 [] 附加到输入名称的末尾，处理数组时事情会稍微复杂一些，因此最好的选择就是序列化通过将其传递给 FormData 构造函数来形成表单。当您这样做时，不妨使用正确的 jQuery 事件绑定(bind)。

<form>
    <input type='file' name='inputfile[]' id='inputfile1'>
    <input type='file' name='inputfile[]' id='inputfile2'>
    <input class="button" type="button" id="post_ad_btn" name="post_ad_btn"  value="POST AD">
</form>

<script>
    $("#post_ad_btn").on("click", function (e) {
        alert("ok");
        var form = $(this).closest("form");
        var form_data = new FormData(form);

        $.ajax({
            url: "upload.php",
            type: 'post',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                alert(response);
            }
        });
    });
</script>