并非所有文件都使用jquery从文件上传控制中获取

Question

我在上传图片时遇到问题。

我的表单中有一个输入类型的文件控件，可以使用jquery添加更多输入控件。 问题是这样的：当我获得所有这些控件值时，它仅从文件控件返回第一个值。
如何在所有控件中获取所有添加的文件？ 这是我的代码：

Java脚本

$(document).ready(function() {
  $('#add_more').click(function() {
    $(this).before($("<div/>", {
      id: 'filediv'
    }).fadeIn('slow').append(
      $("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file',
        accept: '.jpg, .jpeg, .gif'
      }),
      $("<br/><br/>")
    ));
  });

  $('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name) {
      alert("File Must Be Selected");
      e.preventDefault();
    } else {
      //upload all images
      var fileData = $('#file').prop("files")[0];
      var form_data = new FormData();
      form_data.append('file', fileData);
      $.ajax({
        url: "myurl.php",
        dataType: 'text',
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        type: "post",
        error: function() {
          alert('error');
        },
        success: function(ret) {
          alert('sucess');
        }

      });
    }
  }
});

的HTML

<form enctype="multipart/form-data" action="" method="post">
  <hr/>
  <div id="filediv">
    <input name="file[]" type="file" id="file" accept=".jpg, .gif, .jpeg" />
  </div>
  <br/>
  <input type="hidden" value="" id="class" name="class">
  <input type="button" id="add_more" class="upload" value="Add More Files" />
  <input type="button" value="Upload File" name="submit" id="upload" class="upload" />
</form>

当我使用$_FILES['file']['name']从php获得帖子并使用count($_FILES['file']['name'])对其进行count($_FILES['file']['name'])它将返回1 。

当我进一步处理时，只有第一个文件被上载到相应的文件夹中。
行var fileData = $('#file').prop("files")[0]; 。

Answer 1

您的JS代码应如下所示：

  $(document).ready(function () {
        $('#add_more').click(function () {
            $(this).before($("<div/>", {
                id: 'filediv'
            }).fadeIn('slow').append(
                    $("<input/>", {
                        name: 'file[]',
                        type: 'file',
                        // Id must be unique
                        // id: 'file',
                        class: "file_input",
                        accept: '.jpg, .jpeg, .gif'
                    }),
                    $("<br/><br/>")
                    ));
        });

        $('#upload').click(function (e) {
            var boolAreAllFilesSelected = true;
            var objFormData = new FormData();
            $.each($(":file"), function ( ) {
                if (!$(this).val())
                {
                    alert("File Must Be Selected");
                    $(this).focus();
                    return   boolAreAllFilesSelected = false;
                }
                else
                {
                    objFormData.append('file[]', $(this).prop("files")[0]);
                }
            });

            if (boolAreAllFilesSelected)
            {
                $.ajax({
                    url: "myurl.php",
                    dataType: 'text',
                    data: objFormData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: "post",
                    error: function () {
                        alert('error');
                    },
                    success: function (ret) {
                        alert('sucess');
                    }
                });
            }
        });
    });

您的PHP代码应如下所示：

<?php

function uploadSingleImage($arrSingleFile = array())
{
    if (!empty($arrSingleFile))
    {
        // Here your image uploading code
    }
}

if (!empty($_FILES['file']))
{
    $arrFile = $_FILES['file'];
    foreach ($arrFile['name'] as $intIndex => $strName)
    {
        $arrSingleFile["name"]           = $strName;
        $arrSingleFile["type"]           = $arrFile['type'][$intIndex];
        $arrSingleFile["tmp_name"]       = $arrFile['tmp_name'][$intIndex];
        $arrSingleFile["error"]          = $arrFile['error'][$intIndex];
        $arrSingleFile["size"]           = $arrFile['size'][$intIndex];
        uploadSingleImage($arrSingleFile);
    }
}
else
{
    die("You have not uploaded any file.");
}