Загрузите несколько файлов с помощью ajax, php и jquery

Question

Я создаю форму для загрузки нескольких файлов, которую пользователь может использовать для загрузки своих фотографий без перенаправления на другую страницу.

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.

Проблема в том, что я получаю информацию об изображении сразу после вызова $ (). Change (form.submit ()), поэтому иногда он возвращает старое изображение имени, а не переименованное. (Даже если я использовал функцию sleep () в php для задержки, это все равно как-то происходит.

Вот код JjQuery:

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

В загрузке php-кода нет ничего плохого, он работает гладко: ajaxhand.php код следующим образом:

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

Я не уверен, является ли это источником вашей проблемы, но я бы сделал два предложения, одно для вашего javascript и одно для вашего php:

Для вашего javascript, загрузка должна инициироваться чем-то, кроме статуса изменения этого входа. Я бы ненавидел это, если бы выбрал неправильный файл просто из-за толстых пальцев и необходимости пройти множество шагов, чтобы исправить ошибку перед тем, как повторить попытку. Иметь простой <button> вход, который запускает Ajax. Также может помочь jquery очистить текст ввода файла после того, как он получит то, что ему нужно. Если ваша проблема, как вы указываете, связана с использованием этого события, это исправит это и множество других потенциальных ошибок, связанных с пользователем.

Кроме того, он открывает дверь, позволяя пользователям выбирать 10 файлов подряд и выполнять пакетную загрузку, вместо того, чтобы выполнять по одному запросу ajax за раз.

Во-вторых, для вашего php ...

Я бы не дал сценарию ответить с полным заголовком и HTML, который добавляет текущую страницу. Это не надежно, с одной стороны; это не типичный способ сделать это, для двоих; и что более важно, это не нужно.

Вместо этого, почему бы jquery не сделать это? Если ваша версия PHP больше 5, у вас есть возможность конвертировать массивы в json, что очень легко обрабатывается jquery. Просто преобразуйте массив информации о ваших изображениях в json, сделайте jquery-де-сериализацию его в объект, а затем вставьте информацию в DOM, где вы хотите, и даже сохраните ее на случай, если потребуется снова обратиться к ней (и, таким образом, избегайте DOM запрос информации, которая, как вы сказали, может быть неправильной).

Надеюсь, это поможет

Answer 2

Я действительно предлагаю использовать компонент Uploadify jQuery. Это сэкономит ваше время. И сделать возможным показывать прогресс загрузки ... как например.

Арсен