AJAX 多文件上传 - 识别原始元素？

Question

假设HTML页面上存在多种上传输入类型，我希望能够获取每个文件上传的name属性，这样PHP服务器端可以准确地确定文件上传者正在传递什么文件。

我的代码：

$('.php-email-form').submit(function (event) {
  event.preventDefault();
  
  var form = $(this);
  var data = new FormData();
  
  // add datas of input not file to data object
  $.each($(':input', form).not(':input[type=submit]'), function(i, fields){
    data.append($(fields).attr('name'), $(fields).val());
    console.log($(fields).attr('name'), $(fields).val());
  });    
  
  // add data from inputs type file
  $.each($('input[type=file]', form)[0].files, function (i, file) {
    data.append(file.name, file);
    console.log(file.name);
    console.log($(this).attr('name')); // test, trying to get the name attribute of input type file
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="php-email-form" enctype="multipart/form-data">
  <input type="text" name="test" value="value"><br>
  <input type="file" class="custom-file-input" id="photo" name="photo"><br>
  <input type="submit">
</form>

当我查看 PHP 中的 $_FILES 数组时，我得到以下输出：

array(1) { ["test"]=> string(5) "value" }

array(1) { ["IMG_8085_JPG"]=> array(5) { ["name"]=> string(12) "IMG_8085.JPG" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(14) "/tmp/phpxsP6RN" ["error"]=> int(0) ["size"]=> int(65949) } }

如上所示，上面图像的索引是图像名称​​(IMG_8085_JPG)，尽管我希望这个索引是它来自的原始输入的名称。 （照片或照片 2）

因此，如果在 photo 元素中上传了一张图片，则该数组应如下所示：

array(1) { ["test"]=> string(5) "value" }

array(1) { ["photo"]=> array(5) { ["name"]=> string(12) "IMG_8085.JPG" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(14) "/tmp/phpxsP6RN" ["error"]=> int(0) ["size"]=> int(65949) } }

似乎name 索引在上传文件时被覆盖在元素上，因此$(this).attr("name") 不再引用该属性，而是成为上传文件的名称。

我在下面发布了我所有的 jQuery 代码：

$('.php-email-form').submit(function (event) {
    event.preventDefault();

    var form = $(this);     
    var formAction = $(form).attr('action');
    var data = new FormData();

    // add data from inputs type text
    $.each($(':input', form).not(':input[type=submit]'), function(i, fields){
      data.append($(fields).attr('name'), $(fields).val());
    });    

    // add data from inputs type file
    $.each($('input[type=file]', form)[0].files, function (i, file) {
      data.append(file.name, file);
      console.log(file);
      console.log($(this).attr('name'));
    });

    $('.loading').fadeIn();

    $.ajax({
      url: formAction,
      type: "POST",
      data: data,
      contentType: false,
      cache: false,
      processData: false,
    }).done(function(data){
      $('.loading').hide();
      $('.sent-message').fadeIn().html(data);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      $('.loading').hide();
      $('.error-message').show().html(errorThrown);
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

当我 var_dump $_POST & $_FILES 时我期望的结果：

array(1) { ["test"]=> string(5) "value" }


array(1) { ["photo"]=> array(5) { ["name"]=> string(12) "IMG_8085.JPG" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(14) "/tmp/phpxsP6RN" ["error"]=> int(0) ["size"]=> int(65949) } } 

Answer 1

您直接遍历每个输入的文件而不是元素本身，这使得 type 属性可访问。

$.each($('input[type=file]', form), function(i, file) { // Iterate through every file upload element.
    let uploadedFile = this.files[0]; // Get the file that was uploaded to this input.
    data.append(this.name, uploadedFile); // Append it to the form data under the index of the name of the input it was provided in.

    // Testing.
    console.log(this.name); // input name (in this case, 'photo')
    console.log(uploadedFile); // uploaded file element object.
});

这里的区别在于，当您遍历 ('input[type=file]', form)[0].files 时，您是在直接访问文件，并且由于没有对它们的引用，因此无法访问它们来自的父输入。

解决方案是使用“文件”类型遍历每个输入，这样我们仍然可以获取每个输入并可以访问“名称”属性，然后我们可以使用@987654323 获取在循环中上传的文件本身@。 （获取上传的第一个文件。）

Answer 2

代码中缺少的主要内容是表单的enctype 属性。每当您在表单中使用文件输入时，都必须将 enctype 指定为 multipart/form-data。

将您的表单标签更改为：

<form class="php-email-form" enctype="multipart/form-data">

现在您可以像这样简单地发送表单（无需手动分配值）

$('.php-email-form').submit(function(event) {
    event.preventDefault();
    var myFormData = new FormData($(this)[0]);
    $.ajax({
        type: 'POST',
        url: 'test-dest.php',
        data: myFormData,
        contentType: false,
        processData: false,
        cache: false,
        success: function(data) {
            console.log(data);
        }
    });
});

并使用来自 test-dest.php 的 $_FILES 回显

echo var_dump($_FILES);

这会给你结果

    array(1) {
  ["photo"]=>
  array(5) {
    ["name"]=>
    string(14) "web-design.png"
    ["type"]=>
    string(9) "image/png"
    ["tmp_name"]=>
    string(25) "D:\myfolder\tmp\phpC00E.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(4001)
  }
}