I'm trying to upload multiple images using AJAX and PHP but there is an error

Question

In my form.php

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="file_upload[]" id="file_upload" style="display:none;" required multiple accept="images/*" onchange="preview_image()">
</form>

And there is a submit button below.

In my jquery part

$('#submit').on('click', function(e) {
  var files = $('#file_upload')[0].files;
  var form_data = new FormData();
  form_data.append("file_upload",files);

  $.ajax({
    url:"execute/Script.php?request=submit",
    type: "POST",
    data: form_data,
    cache: false,
    contentType: false,
    processData: false,
    success: function(dataResult){
      var dataResult = JSON.parse(dataResult);
    
      if(dataResult.statusCode == 1){
        alert("Success!");
      }
    }
  });
});

And in my script.php

if($_GET['request']=="submit"){
  $gallery_G = "";

  foreach($_FILES['file_upload']['error'] as $key => $error){

    if($error==UPLOAD_ERR_OK){
      $tmp_name = $_FILES['file_upload']['tmp_name'][$key];
      $PhotoName = $_FILES['file_upload']['name'][$key];
                    
      move_uploaded_file($tmp_name,"../img/properties/$name");
      $gallery_G = $gallery_G.';'.$PhotoName;
    }
  }

  $sql = mysqli_query($conn,"INSERT INTO property(photos) VALUES('$gallery_G')");

  if($sql) {
    echo json_encode(array("statusCode"=>1));
  }
  else{
    echo json_encode(array("statusCode"=>2));
  }
}

But it returns me this:

Notice: Undefined index: file_upload in G:\Xampp\htdocs\execute\Script.php on line 31

Warning: Invalid argument supplied for foreach() in G:\Xampp\htdocs\execute\Script.php on line 31
{"statusCode":2}

Is there any solution? I need to send those photos using 'append' method. And need to get those photos in 'Script.php' so that I can process or upload them from there.

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Feb 20 '22 at 14:37
Does this answer your question? ["Notice: Undefined variable", "Notice: Undefined index", and "Notice: Undefined offset" using PHP](https://stackoverflow.com/questions/4261133/notice-undefined-variable-notice-undefined-index-and-notice-undefined) — Nico Haase, Feb 20 '22 at 17:28

Travis Neel · Accepted Answer · 2022-02-20T17:26:44.277

1

Try passing the form element to FormData. No need to call the append method afterwards.

  var files = $('form')[0];
  var form_data = new FormData(files);

By using the append() method, you are putting a [object FileList] in the $_POST array under the file_upload key

If you just want the files from the form, you would need a loop:

  var files = $('#file_upload')[0].files;
  var form_data = new FormData();
    
  for (var i = 0; i < files.length; i++) {
    form_data.append("file_upload[]",files[i]);
  }

edited Feb 20 '22 at 17:26

answered Feb 20 '22 at 16:16

Travis Neel

26
5

But I've other fields and multiple checkbox too. – AmarGallery - an OpenGallery Feb 20 '22 at 16:59
updated answer to pull only the file input – Travis Neel Feb 20 '22 at 17:27

I'm trying to upload multiple images using AJAX and PHP but there is an error

1 Answers1