Can you upload images using Ajax?

Question

I want to upload images using $.ajax, but I get the following PHP error:

undefined index:files

Here's my HTML and JS:

<form id="image_form" enctype="multipart/form-data">
    <input type="file" name="files[]" id="files[]" multiple >
    <input type="submit" name="submit" is="submit" />
</form>
<div id="result"></div>
<script src="js/jquery_library.js"></script>
<script>
    $(document).ready(function()
    {
        $('#image_form').submit(function(e)
        {
            e.preventDefault();             
            $.ajax({
                method: "POST",
                url: "upload.php",
                data: $(this).serialize(),
                success: function(status) 
                {
                    $('#result').append(status);
                }
            });
        });
    });
</script>

And here's my PHP:

<?php
include 'connect.php';
$allowed = array('jpg', 'png', 'jpeg', 'gif', 'bmp');
$myFile = $_FILES['files'];
$fileCount = count($myFile["name"]);

for ($i = 0; $i < $fileCount; $i++)
{
    $name = $myFile["name"][$i];
    $type = $myFile['type'][$i];
    $tmp_name = $myFile['tmp_name'][$i];
    $result = substr(sha1(mt_rand()),0,50);
    $explode = explode(".",$myFile["name"][$i]);
    $ext = end($explode);
    $target = "photos/".$result.".".$ext;

    if(in_array($ext, $allowed))
    {
        if(move_uploaded_file($tmp_name,$target))
        {
            mysqli_query($con, "INSERT INTO images VALUES('".$target."')");
            echo "<img src='$target' />";
        }
    }
} 
?>

Check this article which might be helpful to you. https://www.phparticles.com/ajax/how-to-upload-multiple-images-with-jquery-ajax/ — Mr.Happy, Jul 10 '20 at 03:29

score 1 · Accepted Answer · answered Apr 29 '16 at 06:23

I have figured it out, here is it:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  

<script type="text/javascript">
        $(document).ready(function() {
            $('#image_form').submit(function(e) {
                e.preventDefault();  
               $.ajax({  
                    url: "upload.php",  
                    type: "POST",  
                    data: new FormData(this),  
                    contentType: false,  
                    processData:false,  
                    success: function(status) {
                        $('#result').append(status);
                    }
                });
            });
        });
</script>

//upload.php

<?php

include 'connect.php';

if(is_array($_FILES))   
 {  
      foreach ($_FILES['files']['name'] as $name => $value)  
      {  
           $file_name = explode(".", $_FILES['files']['name'][$name]);  
           $allowed_ext = array("jpg", "jpeg", "png", "gif");  
           if(in_array($file_name[1], $allowed_ext))  
           {  
                $new_name = substr(sha1(mt_rand()),0,50) . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name];  
                $target = "photos/".$new_name;  
                if(move_uploaded_file($sourcePath, $target))  
                {  
                     mysqli_query($con, "INSERT INTO images VALUES('".$target."')");
                     echo "<img src='$target' />";
                }                 
           }            
      }   
 }  

?>

Can you upload images using Ajax?

1 Answers1