2009-12-25 50 views
1

我正在构建一个多文件上传表单,用户可以使用它来上传图片而不用重定向到另一个页面。用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. 

的问题是因为我调用$之后得到的图片信息()变化(form.submit()),所以有时它返回旧名称的图片不改名后一个。 (即使我使用睡眠()函数在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>"; 
    } 
} 

回答

1

我不知道,如果这是你的问题的根源,但我想提出两点建议,一是你的JavaScript和一个为你的PHP:

对于您的JavaScript,除了该输入的更改状态外,还有其他事件触发了上传。我会讨厌它,如果我选择了错误的文件,只是因为手指粗糙,在重试之前必须经过很多步骤才能解开错误。有一个简单的<button>输入触发ajax。它可能有助于让jquery在获得所需内容之后清除文件输入的文本。如果您的问题(如您所示)是由于使用该事件导致的,则会解决该问题以及其他潜在的用户相关错误。

此外,它打开了一扇门,允许用户连续选择10个文件并进行批量上传,而不是一次完成一个ajax请求。

其次,你的PHP ...

我不会有剧本有一个完整的报头和HTML是追加当前页面响应。一个人不可靠;对于两个人来说,这并不是典型的做法;更重要的是没有必要。

相反,为什么没有jQuery做到这一点?如果你的PHP版本大于5,你可以将数组转换成json,jquery很容易处理。只需将你的图片信息数组转换为json,让jquery将其解序列化为一个对象,然后将信息插入到任何你想要的DOM中,甚至存储它以防它需要再次引用它(从而避免DOM查询信息,如您所说,可能是错误的)。

希望这有助于

0

我真的建议使用jQuery的Uploadify组件。 它会节省您的时间。 并使可能显示上传进度...如前。

Arsen