使用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.' );
    }
});

- Hassan Ali

---

使用ajax发送文件的唯一方法是使用FormData，请参见此处。 - adeneo

https://dev59.com/O2gv5IYBdhLWcg3wCcWZ - Bhavya Shaktawat

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

希望这能对你有所帮助。

- Utkarsh Dixit

---

这将发送文本和文件。 - Utkarsh Dixit

[object FormData] 如何在alert()中检查数据？ - Hassan Ali

请问您能否解释一下 var formData = new FormData($("#formid")[0]); 这段代码的含义？ - KBK

@KanishkaBKodithuwakku 只需查看此文档。 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects - Utkarsh Dixit

太好了！对我有用。请记住，在成功回调中，必须对-data-进行JSON解析才能访问其好处：var myobj = JSON.parse(data); - jdisla

你还需要在jQuery.ajax调用中添加processData: false, contentType: false,，否则Jquery会尝试将formData转换为字符串，从而导致“非法调用”错误。 - Bene Laci

Answer 2

现代浏览器支持HTML5文件操作，<input>元素有一个"files"属性。该属性将给出一个文件列表引用，其中包含一个length属性。

由于该属性已经是一个数组，所以您只需要访问它或遍历它即可。 JS

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

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

- ianaya89

---

alert(input.files[i]) 给我返回了一个对象，这是正确的吗？ - Hassan Ali

@HassanAli 是的，正确的，它是一个文件对象数组，每个文件都有像名称、类型和大小等属性。尝试使用 alert(input.files[i].name);。 - ianaya89

我有一个问题，我应该使用input.files[i].name还是input.files[i]来发送数组？ - Hassan Ali

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方法的参数应包括HttpPostedFileBase[] file，因此文件列表将出现在此文件参数中。

- TechGirl

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

- Shivam

---

你意识到你放进了数据库凭证吗？ - Luceos