Upload multiple file with ajax, php, and jquery

Question

Hi everyone, I am building an multiple file upload form that user can use to upload their pictures without being redirected to another page.

The pseudo code as follow:
    1. prompt user to create new album and redirect them to the addphoto.php page.
    2. at the addphoto.php page user can pick their pictures to upload without going further to other pages by using iframe.
        2.1. When user put their pictures into the file input, it will be automatically uploaded by using `onchange()` (call $('input[type=file]').change() in jquery)
        2.2. First, php code will check the uploaded file for validation (type, max size,..)
        2.2. Then, it will add the image to the sql database and return the ID of the picture added.
        2.3. Rename the image according to the userid, albumid, photoid and time uploaded.
        2.4. Move the picture to photo folder, resize to get the thumbnail and move the thumbnail to the thumb folder
        2.5. Update new name in sql database.
    3. After calling $('input[type=file]').change() to submit the file, I proceed to get the picure information in sql database by using ajax and then append to the current page.

The problem is because I get the picture information right after calling $().change( form.submit()) so sometimes it returns the old name picture not the after-renamed one. (Even i used sleep() function in php to delay, it somehow still happens.

Here is the JjQuery code:

$(document).ready
(
   function()
   {
      $("input[type=file]").change
      (
        function($e)
 {
    $("form").submit(); 
    $(this).val("");
    var user = $('#userID').val();
    var albumid = $('#albumid').val();
    $.get
    (
       "ajaxhandle.php",
       {ref: "getlastedimg", uid: user, aid: albumid},
       function ($xml)
      {
  $xml = $($xml);
  if ($xml.find("success").text() == 1)
  {
      var imgid  = $xml.find("imgid").text();
      var imgpath = "photos/album/" + $xml.find("imgname").text();
      var user  = $xml.find("user").text();
      var album  = $xml.find("album").text();
      var html = "<div class='photoReview'><div class='photoReviewCaption'><table><tr><td>Caption</td><td><textarea style='width:200px; height:50px' class='imgCaption'></textarea></td><tr><td>In this photo</td><td>No one<br/>Click on the picture to tag peopel</td></tr></table></div>";
      html += "<div class='photoReviewImg'><img src='" + imgpath +"' /><div><input type='radio' name='albumcover' /><label for='albumcover'>This is the album cover</label><br /><a href=''>Remove this picture</a></div></div></div><div style='clear:both; margin-bottom:15px'></div>";
     $("#photoReview").prepend(html);
  }
  else
  {
     alert($xml);
  }
 },
       'xml'
 );
    }
);

There is nothing wrong with upload image php code, it runs smoothly: ajaxhand.php code as follow:

if ($_GET["ref"] == "getlastedimg")
{
    sleep(2);
    $user = $_GET["uid"];
    $album = $_GET["aid"];
    $img = Image::getLastedImage($user, $album);

    if ($img)
    {
 header("Content-Type: application/xml charset=ISO-8859-1"); 
 echo "<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>";
 echo "<image>";
 echo "<success>1</success>";
 echo "<imgid>"   . $img["photoid"]    .  "</imgid>";
 echo "<imgname>"  . $img["photoname"]  .  "</imgname>";
 echo "<user>"   . $img["userid"]     .  "</user>";
 echo "<album>"   . $img["photoalbum"] .  "</album>";
 echo "<date>"   . $img["timeupload"] .  "</date>";
 echo "</image>";
    }
}

Answer 1

I'm not sure if this is the source of your problem, but I would make two suggestions, one for your javascript, and one for your php:

For your javascript, have the upload triggered by something besides that input's change status. I would hate it if I chose the wrong file simply from having fat fingers and having to go through a lot of steps to undo the error before getting to retry. Have a simple <button> input that triggers the ajax. It might help to also have the jquery clear the text of the file input after it gets what it needs. If your problem, as you indicate, is due to using that event, this would fix that and tons of other potential user-related errors.

Plus it opens the door for allowing users to choose 10 files in a row and doing a batch upload instead of doing them one ajax request at a time.

Second, for your php...

I wouldn't have the script respond with a full header and html that appends the current page. It isn't reliable, for one; it isn't the typical way of doing it, for two; and more importantly it isn't necessary.

Instead, why not have jquery do it? If your version of PHP is greater than 5, you have the ability to convert arrays into json, which jquery very easily handles. Just have your picture info array converted to json, have jquery de-serialze it into an object, and then insert the info into the DOM wherever you want and even store it in case it needs to refer to it again (and thus avoid a DOM query for the info, which as you said, might be wrong).

Hope this helps