上传多个文件使用Ajax，PHP和jQuery [英] Upload multiple file with ajax, php, and jquery
问题描述
我建立一个多文件上传表单，用户可以用它来上传他们的图片不被重定向到另一个网页。
伪code如下：
1.提示用户创建新专辑，并将其重定向到addphoto.php页面。
2.在addphoto.php页面，用户可以选择自己的照片上传，而不使用iframe中进一步去其他页面。
2.1。当用户把他们的图片到该文件中输入时，它会自动用'的onchange（）上传`（调用$（'输入[type = file]'）。改变（）jQuery中）
2.2。首先，PHP code将检查上传的文件进行验证（类型，最大尺寸，..）
2.2。然后，它会在图像添加到SQL数据库，并返回添加的图像的ID。
2.3。根据用户ID，ALBUMID，PHOTOID和时间上传重命名的图像。
2.4。将图片照片文件夹，调整以获得缩略图和移动缩略图到拇指夹
2.5。在更新sql数据库的新名称。
3.改变（）提交的文件后调用$（'输入[type = file]'），我开始使用Ajax获得在SQL数据库中的picure信息，然后附加到当前页面。
现在的问题是，因为我的变化后立即调用$（）获取图像信息（form.submit（）），所以有时它返回旧名称的图片不是后改名之一。 （即使我用睡眠（）函数在PHP推迟，它在某种程度上仍然发生。
下面是JjQuery code：
$（文件）。就绪
（
功能（）
{
$（输入[type = file]）。变化
（
功能（$ E）
{
$（形式）提交（）。
$（本）.VAL（）;
。VAR用户= $（'＃用户ID）VAL（）;
VAR ALBUMID = $（'＃ALBUMID）VAL（）。
$不用彷徨
（
ajaxhandle.php
{REF：getlastedimg，UID：用户，援助：ALBUMID}，
功能（$ XML）
{
$ XML = $（$ XML）;
如果（$ xml.find（成功），文字（）== 1）
{
。VAR imgid = $ xml.find（imgid）文本（）;
VAR imgpath =照片/专辑/+ $ xml.find（imgname）文本（）。
。VAR用户= $ xml.find（用户）文本（）;
VAR专辑= $ xml.find（专辑）文本（）。
VAR HTML =＆LT; DIV CLASS ='photoReview'＆GT;＆LT; DIV class='photoReviewCaption'><table><tr><td>Caption</td><td><textarea风格=宽度：200像素，高度：50px的类='imgCaption'＆GT;＆LT; / textarea的＆GT;＆LT; / TD＆GT;＆LT; TR＆GT;＆LT; TD＆gt;在这张照片＆LT; / TD＆GT;＆LT; TD＆GT;没有一个实施; BR /＆gt;点击该图片以令人标签和LT; / TD＆GT;＆LT; / TR＆GT;＆LT; /表＆gt;＆LT; / DIV＆gt;中;
HTML + =＆LT; DIV CLASS ='photoReviewImg'＆GT;＆LT; IMG SRC ='+ imgpath +/＆GT;＆LT; DIV＆GT;＆LT;输入类型=无线电名称='albumcover'/＆GT;＆LT ;标签='albumcover'＆gt;这是专辑封面＆LT; /标签＆gt;＆LT; BR /＆GT;＆LT; A HREF =''＆GT;删除这幅画＆LT; / A＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;＆LT;股利风格=明确：既;保证金底：15px的'＆GT;＆LT; / DIV＆gt;中;
$（＃photoReview）prePEND（HTML）;
}
其他
{
警报（$ XML）;
}
}，
XML
）;
}
）;
没有什么不妥上传图片的PHP code，它运行平稳： ajaxhand.php code如下：
如果（$ _ GET [参考] ==getlastedimg）
{
睡眠（2）;
$ USER = $ _GET [UID];
$专辑= $ _GET [援助];
$ IMG =图片:: getLastedImage（$用户，$专辑）;
如果（$ IMG）
{
标题（内容类型：应用程序/ XML字符集= ISO-8859-1）;
回声＆LT; XML版本=1.0编码=UTF-8独立='是'＆GT;？;
回声＆lt;图像＆gt;中;
回声＆LT;成功＆GT; 1＆LT; /成功＆gt;中;
回声＆LT; imgid＆gt;中。 $ IMG [PHOTOID。 ＆所述; / imgid＆gt;中;
回声＆LT; imgname＆gt;中。 $ IMG [photoname。 ＆所述; / imgname＆gt;中;
回声＆lt;使用者＆gt;中。 $ IMG [用户id。 ＆LT; /使用者＆gt;;
回声＆LT;画册＆gt;中。 $ IMG [画册。 ＆LT; /专辑＆gt;中;
回声＆LT;日期＆gt;中。 $ IMG [timeupload。 ＆LT; /日期＆gt;中;
回声＆LT; /图像＆gt;中;
}
}
我不知道这是否是你的问题的根源，但我想提出两个建议，一个是你的JavaScript，以及一个为你的PHP：
有关你的JavaScript，必须通过除此之外输入的变化状态的东西引发的上传。我会讨厌它，如果我选择了错误的文件只是从有脂肪的手指，不必经过很多步骤越来越重试之前，撤消错误。有一个简单的＆LT;按钮＆GT; 输入触发AJAX。它可以帮助也有jQuery的清除文件输入的文字后，它得到它所需要的。如果你的问题，因为你指出，是由于使用该事件，这将解决这个问题，并吨的其他潜在用户相关的错误。
另外，它打开大门，允许用户选择在连续10个文件，并做了批量上传，而不是做他们一次一个Ajax请求。
二，为你的PHP ...
我不会有剧本有一个完整的报头和HTML的追加当前页面响应。它是不可靠的，对于一个;它不这样做，有两个典型的方式;更重要的是它是没有必要的。
相反，为什么不能有jQuery的做到这一点？如果您的PHP版本大于5，你必须数组转换成JSON，其中的jQuery很容易处理的能力。只要有你的照片信息数组转换成JSON，有jQuery的去serialze成一个对象，然后将信息到DOM无论你想，甚至将其存储在情况下，它需要引用一遍（从而避免DOM查询的信息，这是你说的，可能是错误的）。
希望这有助于
I am building an multiple file upload form that user can use to upload their pictures without being redirected to another page.
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.
The problem is because I get the picture information right after calling $().change( form.submit()) so sometimes it returns the old name picture not the after-renamed one. (Even i used sleep() function in php to delay, it somehow still happens.
Here is the JjQuery code:
$(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'
);
}
);
There is nothing wrong with upload image php code, it runs smoothly: ajaxhand.php code as follow:
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>";
}
}
I'm not sure if this is the source of your problem, but I would make two suggestions, one for your javascript, and one for your php:
For your javascript, have the upload triggered by something besides that input's change status. I would hate it if I chose the wrong file simply from having fat fingers and having to go through a lot of steps to undo the error before getting to retry. Have a simple <button> input that triggers the ajax. It might help to also have the jquery clear the text of the file input after it gets what it needs. If your problem, as you indicate, is due to using that event, this would fix that and tons of other potential user-related errors.
Plus it opens the door for allowing users to choose 10 files in a row and doing a batch upload instead of doing them one ajax request at a time.
Second, for your php...
I wouldn't have the script respond with a full header and html that appends the current page. It isn't reliable, for one; it isn't the typical way of doing it, for two; and more importantly it isn't necessary.
Instead, why not have jquery do it? If your version of PHP is greater than 5, you have the ability to convert arrays into json, which jquery very easily handles. Just have your picture info array converted to json, have jquery de-serialze it into an object, and then insert the info into the DOM wherever you want and even store it in case it needs to refer to it again (and thus avoid a DOM query for the info, which as you said, might be wrong).
Hope this helps
这篇关于上传多个文件使用Ajax，PHP和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
