Can you upload images using Ajax?
<p>I want to upload images using <code>$.ajax</code>, but I get the following PHP error:</p>

<blockquote>
  <p><code>undefined index:files</code></p>
</blockquote>

<p>Here's my <strong>HTML and JS</strong>:</p>

<pre><code>&lt;form id="image_form" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="files[]" id="files[]" multiple &gt;
    &lt;input type="submit" name="submit" is="submit" /&gt;
&lt;/form&gt;
&lt;div id="result"&gt;&lt;/div&gt;
&lt;script src="js/jquery_library.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(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);
                }
            });
        });
    });
&lt;/script&gt;
</code></pre>

<p>And here's my <strong>PHP</strong>:</p>

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

for ($i = 0; $i &lt; $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 "&lt;img src='$target' /&gt;";
        }
    }
} 
?&gt;
</code></pre>