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（））之后立即获取图片信息，所以有时它会返回旧名称图片而不是后重命名图片。（即使我在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'
 );
    }
);

上传图片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组件。它会节省您的时间。并且可以显示上传进度...例如

阿尔森

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

2 个答案: