使用ajax、php和jquery上传多个文件

我正在构建一个多文件上传表单，用户可以使用该表单上传图片，而无需重定向到其他页面

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（））之后就得到了图片信息，所以有时它会返回旧名称图片，而不是重命名后的图片。（尽管我在php中使用了sleep（）函数来延迟，但不知何故它仍然会发生

以下是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'
 );
    }
);

$（文档）。准备好了吗
(
函数（）
{
$（“输入[类型=文件]”）。更改
(
职能（e美元）
{
$（“表格”）。提交（）；
$（此）.val（“”）；
var user=$（'#userID'）.val（）；
var albumid=$（'#albumid'）.val（）；
美元
(
“ajaxhandle.php”，
{ref:“getlastedimg”，uid:user，aid:albumid}，
函数（$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=“在这张照片中没有人
点击图片标记人物”；
html+=“这是专辑封面
”；
$（“#photoReview”）.prepend（html）；
}
其他的
{
警报（$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>";
    }
}

if（$\u GET[“ref”]=“getlastedimg”）
{
睡眠（2）；
$user=$_GET[“uid”]；
$album=$_GET[“aid”]；
$img=Image:：getLastedImage（$user，$album）；
如果（$img）
{
标题（“内容类型：应用程序/xml字符集=ISO-8859-1”）；
回声“；
回声“；
回声“1”；
echo“$img[“photoid”]”；
echo“$img[“photoname”]”；
echo“$img[“userid”]”；
echo“$img[“相册]”；
echo“$img[“timeupload”]；
回声“；
}
}

我不确定这是否是您问题的根源，但我想提出两个建议，一个是针对您的javascript，另一个是针对您的php：

对于您的javascript，除了输入的更改状态外，还可以通过其他方式触发上载。如果我选择了错误的文件，我会很讨厌，因为我的手指太粗，在重试之前必须通过许多步骤来撤销错误。使用一个简单的

输入来触发ajax。使用jquery可能也会有所帮助在文件得到所需内容后清除文件输入的文本。如果您的问题（如您所指出的）是由于使用该事件造成的，这将修复该问题以及大量其他与用户相关的潜在错误

此外，它还允许用户连续选择10个文件并进行批量上传，而不是一次只执行一个ajax请求

第二，对于您的php

我不会让脚本响应一个完整的标题和附加当前页面的html。首先，它不可靠；其次，它不是典型的方式；更重要的是，它不是必需的

相反，为什么不让jquery来做呢？如果你的PHP版本大于5，你就可以将数组转换成json，jquery很容易处理。只要把图片信息数组转换成json，让jquery将其反序列化为一个对象，然后将信息插入到你想要的DOM中，甚至可以存储在需要时ds再次引用它（从而避免对信息进行DOM查询，正如您所说，这可能是错误的）

---

希望这能有所帮助

我不确定这是否是您问题的根源，但我想提出两个建议，一个是针对您的javascript，另一个是针对您的php：

对于您的javascript，除了输入的更改状态外，还可以通过其他方式触发上载。如果我选择了错误的文件，我会很讨厌，因为我的手指太粗，在重试之前必须通过许多步骤来撤销错误。使用一个简单的

输入来触发ajax。使用jquery可能也会有所帮助在文件得到所需内容后清除文件输入的文本。如果您的问题（如您所指出的）是由于使用该事件造成的，这将修复该问题以及大量其他与用户相关的潜在错误

此外，它还允许用户连续选择10个文件并进行批量上传，而不是一次只执行一个ajax请求

第二，对于您的php

我不会让脚本响应一个完整的标题和附加当前页面的html。首先，它不可靠；其次，它不是典型的方式；更重要的是，它不是必需的

相反，为什么不让jquery来做呢？如果你的PHP版本大于5，你就可以将数组转换成json，jquery很容易处理。只要把图片信息数组转换成json，让jquery将其反序列化为一个对象，然后将信息插入到你想要的DOM中，甚至可以存储在需要时ds再次引用它（从而避免对信息进行DOM查询，正如您所说，这可能是错误的）

---

希望这有帮助

我真的建议使用Uploadify jQuery组件。 这会节省你的时间。 并尽可能显示上传进度…如前所述

---

Arsen

我真的建议使用Uploadify jQuery组件。 这会节省你的时间。 并尽可能显示上传进度…如前所述

阿森