我正在構建一個多文件上傳表單,用戶可以使用它來上傳圖片而不用重定向到另一個頁面。用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>";
}
}