使用ajax发送输入文件数据[重复]答案

【问题标题】：Send input files data with ajax [duplicate]使用ajax发送输入文件数据[重复]
【发布时间】：2015-03-12 06:21:37
【问题描述】：

html 标记：

<input id="fileSelect" type="file" id="file" name="files[]" multiple="multiple" accept="image/*" />

我正在使用 php.ini 上传多个文件。我想制作一组上传文件并使用ajax发送到服务器。如何将多个选中的文件组成一个数组？

JavaScript：

jQuery.ajax({
    url: 'insertfiles.php',
    type: "POST",
    data: {
      file: // array of selected files.
    },
    success: function(data){
    },
    error: function(data){
      alert( 'Sorry.' );
    }
});

【问题讨论】：

使用 ajax 发送文件的唯一方法是使用FormData，参见THIS
stackoverflow.com/questions/10899384/…

标签： javascript php jquery ajax

【解决方案1】：

使用下面的代码。

var formData = new FormData($("#formid")[0]);
jQuery.ajax({
  url: 'insertfiles.php',
  type: "POST",
  data: formData,
  success: function(data) {
        
  },
  error: function(data) {
    alert( 'Sorry.' );
  },
  cache: false,
  contentType: false,
  processData: false,
});

希望对你有帮助

【讨论】：

这将发送文本和文件
[object FormData]如何查看alert()中的数据？
能否解释一下var formData = new FormData($("#formid")[0]);
@KanishkaBKodithuwakku 看看这个文档。 developer.mozilla.org/en-US/docs/Web/API/FormData/…
太棒了！为我工作。请记住 -data- 成功回调必须经过 JSON 解析才能访问其好东西：var myobj = JSON.parse(data);

【解决方案2】：

支持 HTML5 文件内容的现代浏览器在 <input> 元素中具有“文件”属性。这会给你一个文件列表引用，它有一个length 属性。

由于该属性已经是 array，因此您只需要访问它或遍历它。

var input = document.getElementById('id');
console.log(input.files);

for (var i = 0; i < input.files.length; i++) {
 console.log(input.files[i]);
}

【讨论】：

alert(input.files[i]) 给我对象。对吗？
@HassanAli 是的，它是一个 File 对象数组，每个文件都有名称、类型和大小等属性。试试 alert(input.files[i].name);
一个问题我是使用 input.files[i].name 还是 input.files[i] 发送数组？

【解决方案3】：

var formData = new FormData(this);
debugger;
$.ajax({
  url: formURL,
  type: 'POST',
  data: formData,
  mimeType: "multipart/form-data",
  contentType: false,
  cache: false,
  processData: false,
  success: function (data, textStatus, jqXHR) {
    debugger;
  },
  error: function (jqXHR, textStatus, errorThrown) {
                    
  }
});

以上代码将帮助您在一次提交调用中发布内容和文件。

post 方法参数应该包含HttpPostedFileBase[] file 这样文件列表就会出现在这个文件参数中

【讨论】：

【解决方案4】：

这是我的多文件上传代码。请参考这里

$fileCount = count($_FILES);
for($i=0; $i < $fileCount; $i++) {
$fileName = (!empty($_FILES["file-$i"]["name"])) ? $_FILES["file-$i"]["name"] : '';

$hostName = "REDACTED";
$userName = "REDACTED";
$passWord = "REDACTED";
$dbName   = "b7_15386696_db_printer";

$query    = "INSERT INTO print_table (NAME, EMAIL, PHONE, ADDRESS, FILENAME, NUMBEROFCOPY, SREQUIREMENTS, FIELD1)
VALUES ('$name', '$emailId', '$phone', '$address', '$fileName', '$ncopy', '$requirements', CONVERT_TZ(NOW(),'+00:00','+09:30'))";

$connect = mysqli_connect($hostName,"$userName","$passWord","$dbName");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

【讨论】：

您知道您输入了数据库凭据吗？