Question

所以我正在开发一个小项目，在过去的几个小时里，我试图找到如何通过AJAX将formData Obj上传到PHP服务器的多个文件。

我认为这很容易，因为我在上传一个文件时工作非常简单，但是当我想在formData Obj中添加多个文件时，我会遇到各种错误。

我当前的代码：

HTMN/AJAX::    
formData = new FormData($('#form')[0]);
formData.append("File", $("#myFile1")[0].files[0]);
                $.ajax({
                    url: '../uploadFile.php',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    dataType: 'json'
                }).fail(function(jqXHR) {
                    console.log(jqXHR.responseText);
                    console.log(jqXHR.status);
                });
            }


PHP:
echo $_FILES['File']['name'];
{Lots of code, not worth pasting - my point is that, its working!}

上面的代码效果很好，我能够得到我需要的一切 - 并将文件上传到我选择的路径。但第二个我尝试.append另一个文件崩溃。如果我喜欢下面的代码，它会崩溃，并使用未定义的索引抛出错误

 formData.append("File1", $("#myFile1")[0].files[0]);
 formData.append("File2", $("#myFile2")[0].files[0]);

想我会尝试将它追加到像这样的相同数组中;

 formData.append("File[]", $("#myFile1")[0].files[0]);
 formData.append("File[]", $("#myFile2")[0].files[0]);

并且它似乎工作得很好，只要我只使用一个文件，但第二个我将另一个文件推入myFile []数组，它会抛出未定义的索引错误。对我来说，似乎我打破了formData obj，当我追加多个文件时 - 出于某种原因。

我的问题的解决方案是运行多个AJAX调用，每个AJAX调用上传一个文件 - 但似乎是一个非常低效的解决方案。所以，如果有人能帮助我，我会很感激！

Answer 1

formData.append("File1", $("#myFile1")[0].files[0]);
formData.append("File2", $("#myFile2")[0].files[0]);

使用这种方法，您是否适应了PHP部分

echo $_FILES['File']['name'];

因此......？否则，您当然会收到“未定义的索引”错误。

formData.append("File[]", $("#myFile1")[0].files[0]);
formData.append("File[]", $("#myFile2")[0].files[0]);

这不起作用，因为

FormData.append()：
将键/值对附加到FormData对象。

- 对于JavaScript，File[]只是一个与任何数组无关的字符串，因此第二行将覆盖FormData对象中的第一行。

但您可以自己指定数组索引，

formData.append("File[0]", $("#myFile1")[0].files[0]);
formData.append("File[1]", $("#myFile2")[0].files[0]);

- 这应该可行，并在PHP脚本中为您提供一系列上传文件要进行验证，请在接收脚本的开头添加var_dump($_FILES);。

Answer 2

对于纯Javascript，请使用此方法
HTML

<form type="multipart/form-data" >
  File 1: <input id="file1" name="file1" type="file" /><br />
  File 2: <input id="file2" name="file2" type="file" /><br />
          <br />
 <input type="submit" value="Submit" onclick="your_function();" />
</form>

Javascript：

function your_function(){
    var file1 = _("file1").files[0];
    var file2 = _("file2").files[0];
  var formdata = new FormData();
formdata.append("file1", file1);
formdata.append("file2", file2);
  var ajax = new XMLHttpRequest();
   ajax.open("POST", "path-to-your.php");
    hr.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
                    alert(ajax.responseText);
                /*do what you wish here */
        }
    }
    ajax.send(formdata);
}

PHP

<?php
echo $_FILES['file1']['title'];
echo $_FILES['file2']['title'];
?>

希望这有助于某人。

formData - AJAX - PHP-上传多个文件

2 个答案: