使用 AJAX/jQuery/formData 上传单个输入的多个文件答案

【问题标题】：Upload multiple files with single input with AJAX/jQuery/formData使用 AJAX/jQuery/formData 上传单个输入的多个文件
【发布时间】：2015-12-22 23:42:46
【问题描述】：

我正在尝试使用 AJAX/jQuery 制作上传表单。问题是我无法从单个输入上传多个文件。使用此代码，我可以上传 1 个文件：

HTML：

<form name="myform" id="myform" enctype="multipart/form-data">
    <input name="file[]" type="file" multiple />
    <input type="button" value="Upload" />
</form>

jQuery：

$(document).ready(function(){
  $(':button').click(function(){
  var formData = new FormData();
  formData.append('file', $('input[type=file]')[0].files[0]); 
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      dataType:"json",
      async: true,
      success: function(data) {
        console.log(data.Result);
      },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
    });
  });
});

我将formData 部分更改为：

var formData = new FormData($('input[name^="file"]'));
$.each($('input[name^="file"]')[0].files, function(i, file){
 formData.append(i, file);
});

PHP 部分：

foreach($_FILES as $index => $file)
    {
        // for easy access
        $fileName     = $file['name'];
        // for easy access
        $fileTempName = $file['tmp_name'];
        // check if there is an error for particular entry in array
        if(!empty($file['error'][$index]))
        {
            // some error occurred with the file in index $index
            // yield an error here
            return false;
        }

        // check whether file has temporary path and whether it indeed is an uploaded file
        if(!empty($fileTempName) && is_uploaded_file($fileTempName))
        {
            // move the file from the temporary directory to somewhere of your choosing
            move_uploaded_file($fileTempName, ROOT_DIR . '/uploads/xPhoto/' . $fileName);
            // mark-up to be passed to jQuery's success function.
            echo '<p>Click <strong><a href="uploads/' . $fileName . '" target="_blank">' . $fileName . '</a></strong> to download it.</p>';
        }
    }

所以我的问题是，如何通过单个输入上传多个文件？

【问题讨论】：

标签： php jquery ajax xmlhttprequest

【解决方案1】：

这对我有用。让您从单个输入上传多个文件。都可以从 php 中的 $_FILES 全局访问。

var formData = new FormData();
var files = $('#files_input').prop('files');

$.each(files, function(i, file) {
    formData.append("file_"  + i, file);
});

【讨论】：

【解决方案2】：

我有在我的一个（旧）项目中收集文件的确切方法。

HTML

<input id="files" type="file" name="files[]" multiple />

jQuery

var fd = new FormData();
$.each($('#files')[0].files, function(i, file) {
    fd.append(i, file);
});

// Other form data can be set and passed using:
// fd.append('POST_key', $input_object.val());

$.ajax({
    url: var_your_file_handler,
    type: 'POST',
    data: fd,
    processData: false, // tell jQuery not to process the data
    contentType: false, // tell jquery not to set content type
    ...
)};

我相信 - 这是一个旧项目 - processData 和 contentType 需要为 false 才能在请求中发送 fd 对象，就像在正常的表单提交期间一样。只要 AJAX 请求是 POST，就可以在 PHP 中使用$_FILES 收集文件。

【讨论】：