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

file.name 不是输入字段的名称，而是文件的名称。

您应该遍历所有文件输入，这样您就可以像处理其他输入一样获取输入字段的名称。

$('input[type=file]', form).each(function() {
    data.append($(this).attr("name"), this.files[0])
});

但是您实际上并不需要任何一个循环。做吧

var data = new FormData(this);

当FormData 构造函数的参数是一个表单时，它会用所有输入填充它。