javascript - 处理从单个输入元素通过 POST 上传的多个文件

Question

我正在编写一个图像上传程序，并让它与单个文件完美配合，但是当我尝试处理多个文件时，似乎没有任何内容通过。我有一个 HTML 元素来接受多个文件:

<input type="file" id="entryPhotos" multiple>

然后构建我的 FormData:

var formData = new FormData();
var entryArray = new Array("entryName","entryFoodType","entryROI","entryOpeningHour","entryOpeningMinute","entryOpeningAMPM","entryClosingHour","entryClosingMinute","entryClosingAMPM","entryPhone","entryEmail","entryPhotos","entryDesc","entryLocLat","entryLocLong");
for(var temp = 0; temp < entryArray.length; temp++){
    //--I suspect my problem is here
    if($('#' + entryArray[temp])[0].files){
        formData.append(entryArray[temp], $('#' + entryArray[temp])[0].files);
    }
    else{
        formData.append(entryArray[temp], $('#' + entryArray[temp]).val());
    }
}

然后使用 jQuery.ajax 发送:

$.ajax({
    url: '/scripts/spotEntry.php',
    data: formData,
    type: 'POST',
    contentType: false,
    processData: false,
    success: function(returnCode){
        entryReturnProc(returnCode);
    }
});

但是当它到达服务器时什么也没有:

echo count($_FILES["entryPhotos"]["name"]);   //returns 0

如果我只做一张图片，我可以做 $('#' + entryArray[temp])[0].files[0] 它会工作正常，但不应该然后我是否能够删除 [0] 并让它发送数组，根据我的理解，FormData jQuery.ajax 和 PHP 都支持？

Answer 1

对于可能遇到此问题的任何其他人。经过更多搜索，我在这里找到了答案:uploading-multiple-files-using-formdata

我不得不稍微修改我的 formData.append 命令并遍历数组，而不是只传递整个数组:

var entryArray = new Array("entryName","entryFoodType","entryROI","entryOpeningHour","entryOpeningMinute","entryOpeningAMPM","entryClosingHour","entryClosingMinute","entryClosingAMPM","entryPhone","entryEmail","entryPhotos","entryDesc","entryLocLat","entryLocLong");
for(var temp = 0; temp < entryArray.length; temp++){
    if($('#' + entryArray[temp])[0].files){
        for (var i = 0; i < $('#' + entryArray[temp])[0].files.length; i++) {
            formData.append(entryArray[temp] + "[]", $('#' + entryArray[temp])[0].files[i]);
        }
    }
    else{
        formData.append(entryArray[temp], $('#' + entryArray[temp]).val());
    }
}

为了完成，如果将来可能对某人有所帮助，请在服务器上使用 PHP 进行处理:

for($i = 0; $i < count($_FILES["entryPhotos"]["name"]); $i++){
       $tmp_name = $_FILES["entryPhotos"]["tmp_name"][$i];
       if (!$tmp_name) continue;

       $name = basename($_FILES["entryPhotos"]["name"][$i]);

    if ($_FILES["entryPhotos"]["error"][$i] == UPLOAD_ERR_OK)
    {
        if ( move_uploaded_file($tmp_name, $uploaddir.$name) ){
            echo 'us';
        }
        else{
            echo 'uf';
        }
    }
    else{
        echo 'uf';
    }
}

编辑/注意:此上传脚本相当粗糙，存在一定的安全风险。上传文件时始终牢记:永远不要相信用户上传的内容是安全的。尽你所能清理你上传的内容。此代码段中未显示的一件事是文件保存在 webroot 后面的文件夹中。这有助于防止潜在黑客通过他们可能上传的脚本进行访问。

还建议将文件名一起更改为随机且唯一的名称，同时检查文件扩展名。一些服务器设置为允许多个扩展，这可以提供一个空缺。我在网上找到了几种方法来做这些事情，将它们混合在一起后，这就是我想出的方法:

为了获得一个随机且唯一的名称，我使用了 $prefix = str_replace(array('.', ' '), '' , microtime()); 提取当前的 Unix 时间以微秒为单位，因此给出了一个潜在黑客无法轻易预测的数字，然后为了帮助确保唯一性，因为我循环遍历多个文件，我将循环索引添加到前缀的末尾。

然后我提取了基本名称的扩展名。我没有使用典型的 pathinfo() 来提取扩展，而是使用了 strstr(basename($name), '.')。我发现这样做的好处是它会提取所有文件扩展名，而不仅仅是最后一个。然后我对照接受的扩展名列表进行检查。如果它通过，那么它可能会被上传到 webroot 之前的目录。这固有地采取的一个额外步骤是，如果文件有多个扩展名，它会自动跳过，避免那里可能存在的安全风险。

最后要注意的是，有一些我没有使用的“卫生”技术，例如检查图像大小和检查 MIME 类型以验证文件是图像。实际图像(因此返回文件大小)可能包含恶意编码，并且 MIME 类型由客户端发送，因此可以伪造。这些对我来说似乎没有任何实际好处，所以我没有使用它们，但有些人可能会争辩说没有太安全的东西，甚至可以采取进一步的措施。以任何方式处理用户输入时，您都应始终进行尽可能多的研究并采取适当的预防措施以确保您、您的数据和您的用户受到保护。