2009-12-25 24 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