Send input files data with ajax

Question

html markup:

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

I am uploading multiples files with php. I want to make an array of upload files and send to server with ajax. how to make an array of the multiple selected files?

JavaScript:

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

The only way to send files with ajax is with `FormData`, see [***THIS***](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously#answer-8758614) — adeneo, Jan 14 '15 at 05:59
http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax — Bhavya Shaktawat, Jan 14 '15 at 06:02

score 12 · Answer 1 · edited Oct 05 '21 at 02:51

12

Use the code below.

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

Hope this helps you

edited Oct 05 '21 at 02:51

Super Kai - Kazuya Ito

22,221
10
124
129

answered Jan 14 '15 at 06:07

Utkarsh Dixit

4,267
3
15
38

1

This will send both text and files – Utkarsh Dixit Jan 14 '15 at 06:08
[object FormData] how to check the data in alert()? – Hassan Ali Jan 14 '15 at 06:10
2

could you please explain `var formData = new FormData($("#formid")[0]);` – KBK Jan 13 '16 at 06:17
@KanishkaBKodithuwakku Just have a look at this documentation. https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects – Utkarsh Dixit Jan 16 '16 at 14:53
Great! Worked for me. Keep in mind -data- in success call back must be JSON parsed in order to access its goodies: `var myobj = JSON.parse(data);` – jdisla Dec 06 '21 at 16:29
You must also add `processData: false, contentType: false,` to the jQuery.ajax call, otherwise Jquery will try to transform formData into string, and there will be "Illegal invocation" error. – Bene Laci Sep 16 '22 at 17:28

score 8 · Accepted Answer · answered Jan 14 '15 at 06:01

8

Modern browsers that support the HTML5 file stuff have in the <input> element a "files" property. That will give you a file list reference, which has a length property.

As the property is already an array so you just need to access it or iterate through it.

JS

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

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

answered Jan 14 '15 at 06:01

ianaya89

4,153
3
26
34

alert( input.files[i] ) giving me object. is it right? – Hassan Ali Jan 14 '15 at 06:04
@HassanAli yes is correct, it is an array of File objects, each file has properties like name, type and size. Try alert( input.files[i].name); – ianaya89 Jan 14 '15 at 06:09
one question do i send array using input.files[i].name or input.files[i]? – Hassan Ali Jan 14 '15 at 06:15

score 4 · Answer 3 · edited Oct 05 '21 at 06:06

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

The above code will help you post content plus files in one submit call.

The post method parameter should include HttpPostedFileBase[] file so the list of files will appear in this file parameter

score -13 · Answer 4 · edited Oct 10 '19 at 16:23

This is my code for multiple file upload. Please refer this

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

Are you aware you put in database credentials? – Luceos Nov 07 '16 at 13:14 — Luceos, Nov 07 '16 at 13:14

Send input files data with ajax

4 Answers4