Javascript 并非所有文件都是使用jquery从文件上载控件获取的

我在上传图像时遇到问题

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

Javascript

$(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');
        }

      });
    }
  }
});

$（文档）.ready（函数（）{
$（“#添加更多”）。单击（函数（）{
$（此）。在（$（“”）之前{
id:'filediv'
}).fadeIn（'slow'）.append(
$("", {
名称：“文件[]”，
键入：“文件”，
id:'文件'，
接受：'.jpg、.jpeg、.gif'
}),
$（“

”）
));
});
$（“#上载”）。单击（函数（e）{
var name=$（“：file”）.val（）；
如果（！name）{
警报（“必须选择文件”）；
e、 预防默认值（）；
}否则{
//上传所有图片
var fileData=$（'#file'）.prop（“files”）[0]；
var form_data=new FormData（）；
表单_data.append（'file'，fileData）；
$.ajax({
url:“myurl.php”，
数据类型：“文本”，
数据：表格数据，
cache:false，
contentType:false，
processData:false，
类型：“post”，
错误：函数（）{
警报（“错误”）；
},
成功：功能（ret）{
警惕（“成功”）；
}
});
}
}
});

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>

当我使用

$\u文件['file']['name']

从php获得帖子并使用

count（$\u FILES['file']['name']）

它返回

1

当我进一步处理时，只有第一个文件被上传到相应的文件夹中。

---

第

var fileData=$（'#file'）.prop（“files”）[0]；

行上可能有错误。您的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

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.");
}

$（文档）.ready（函数（）{
$（“#添加更多”）。单击（函数（）{
$（此）。在（$（“”）之前{
id:'filediv'
}).fadeIn（'slow'）.append(
$("", {
名称：“文件[]”，
键入：“文件”，
//Id必须是唯一的
//id:'文件'，
类：“文件输入”，
接受：'.jpg、.jpeg、.gif'
}),
$（“

”）
));
});
$（“#上载”）。单击（函数（e）{
var boolAreAllFilesSelected=true；
var objFormData=new FormData（）；
$.each（$（“：文件”），函数（）{
if（！$（this.val（））
{
警报（“必须选择文件”）；
$（this.focus（）；
return boolAreAllFilesSelected=false；
}
其他的
{
objFormData.append（'file[]'，$（this.prop（“files”）[0]）；
}
});
如果（已选择BoolarEallFiles）
{
$.ajax({
url:“myurl.php”，
数据类型：“文本”，
数据：objFormData，
cache:false，
contentType:false，
processData:false，
类型：“post”，
错误：函数（）{
警报（“错误”）；
},
成功：功能（ret）{
警惕（“成功”）；
}
});
}
});
});

您的PHP代码应如下所示：

  $(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

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.");
}

是否可能重复？