将 FormData 对象放入数组中以从不同的输入文件上载文件

Put FormData object into an array to upload files from different input files

本文关键字:文件 输入 上载 对象 FormData 数组      更新时间:2023-09-26

我有一个这样的形式:

<form>
    <div class="characteristicData" id="1">
        <textarea></textarea>
        <input type="file" name="filelist-1" />
    </div>
    <div class="characteristicData" id="2">
            <textarea></textarea>
            <input type="file" name="filelist-2" />
    </div>
    <input type="button" class="send" value="Send" />
</form>

此表单包含三个div,用于区分将其正确发送到服务器并在数据库中为所属id设置正确值所需的数据。

我想在服务器上获取$_POST$_FILES的数据是这样的:

$_POST
Array
(
    [characteristic] => Array
    (
        [element_0] => Array
        (
            [id_characteristic] => 1
            [items] => 0001,0002,0003
        )
        [element_1] => Array
        (
            [id_characteristic] => ="2"
            [items] => 0001,0002,0003
        )
     )
 )
$_FILES
Array
(
    [characteristic] => Array
    (
        [element_0] => Array
        (
            [name] => items.csv
            [type] => application/vnd.ms-excel
            [tmp_name] => tmp/php44DF.tmp
            [error] => 0
            [size] => 8
        )
        [element_1] => Array
        (
            [name] => items.csv
            [type] => application/vnd.ms-excel
            [tmp_name] => tmp/php44DF.tmp
            [error] => 0
            [size] => 8
        )
    )
)

因此,我的选择是尝试创建一个包含键的对象,每个键都包含 FormData 对象。最后,我jQuery是这样的:

$(function() {
    $(".send").click(function() {
        var formdata = new FormData(),
            $this,
            fileDOM = $("input[type='file']")[0];
        $(".characteristicData").each(function(i, v) {
            $this = $(this);
            fileDOM = $this.find("input[type='file']")[0];
            formdata.append("characteristic[element_"+i+"][id_characteristic]", $this.attr("id"));
            formdata.append("characteristic[element_"+i+"][items]", $this.find("textarea").val());
            if ( $this.find("input[type='file']").val() ) {
                formdata.append("characteristic[element_"+i+"][file]", fileDOM.files[0], fileDOM.files[0].name);
            }
        });
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
        });
    });
});

该代码工作正常,当我打印$_POST$_FILES变量时,结果是我预期的,但不适用于$_FILES。我从文件中得到的是:

Array
(
    [characteristic] => Array
    (
        [name] => Array
        (
            [element_0] => Array
            (
                [file] => items.csv
            )
            [element_1] => Array
            (
                [file] => items.csv
            )
        )
        [type] => Array
        (
            [element_0] => Array
            (
                [file] => application/vnd.ms-excel
            )
            [element_1] => Array
            (
                [file] => application/vnd.ms-excel
            )
        )
        [tmp_name] => Array
        (
            [element_0] => Array
            (
                [file] => E:'wamp'tmp'php44DF.tmp
            )
            [element_1] => Array
            (
                [file] => E:'wamp'tmp'php44E0.tmp
            )
        )
        [error] => Array
        (
            [element_0] => Array
            (
                [file] => 0
            )
            [element_1] => Array
            (
                [file] => 0
            )
        )
        [size] => Array
        (
            [element_0] => Array
            (
                [file] => 8
            )
            [element_1] => Array
            (
                [file] => 8
            )
        )
    )
)

有什么方法可以得到我期望的结果吗?

几天没有寻找解决问题的方法后,今天我决定找到它,我做到了。

首先,我

尝试将每个div的整个数据放入一个数组中,然后将该数组放入formdata中,问题是在服务器上我得到了一个[object file],但我无法从中获取任何东西。$_FILES数组为空,所以我回滚到开头。

然后,查看我的javascript代码,更具体地说,这部分:

if ( $this.find("input[type='file']").val() ) {
    formdata.append("characteristic[element_"+i+"][file]", fileDOM.files[0], fileDOM.files[0].name);
}

这给了我在服务器上丑陋的数组,所以我认为数组是问题所在,我决定删除characteristic[]数组并使用$_POST$_FILES作为我的数据的数组容器。此外,我在将文件附加到表单数据时删除了"["文件"]"索引。

$(".characteristicData").each(function(i, v) {
    $this = $(this);
    fileDOM = $this.find("input[type='file']")[0];
    formdata.append("element_"+i+"[id_characteristic]", $this.attr("id"));
    formdata.append("element_"+i+"[items]", $this.find("textarea").val());
    if ( $this.find("input[type='file']").val() ) {
        formdata.append("element_"+i, fileDOM.files[0], fileDOM.files[0].name);
    }
});

现在,当我将数据发送到服务器并打印值时,我得到了文件的预期值。

Array
(
    [element_0] => Array
        (
            [name] => 001.png
            [type] => image/png
            [tmp_name] => E:'wamp'tmp'php9BA.tmp
            [error] => 0
            [size] => 578
        )
)