使用 ajax 发送输入文件数据

Question

html 标记：

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

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

JavaScript:

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

Answer 1

支持 HTML5 文件内容的现代浏览器在 <input> 元素中有一个 "files" 属性。这将为您提供一个文件列表参考，其中有一个 length 属性。

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

JS

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

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

Answer 2

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

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

Answer 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 一次提交调用中的内容和文件。

post 方法参数应包含 HttpPostedFileBase[] file 因此文件列表将出现在此文件参数中

Answer 4

使用下面的代码。

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,
});

希望对您有所帮助

使用 ajax 发送输入文件数据

Send input files data with ajax

javascript

php

ajax

jquery