使用PHP上传图像并使用JQuery进行追加
Upload Image with PHP and append with JQuery
我有一个简单的管理页面,用于编辑主页面的内容。
在管理页面上,您可以上传一个文件。(有效)
这是php上传代码:
$target_dir = "../images/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
然而。。。
当我上传文件时,我想自动将它附加到主页上的一个元素(图像库)。
CSS生成如w3schools上所示的缩略图视图(http://www.w3schools.com/css/css_image_gallery.asp)当您单击图像时,它会打开一个包含完整图像的新窗口。
这是我的HTML代码:
<aside id="rooms">
<h3>Room Types</h3>
<div class="img">
<p>1 Bedroom</p>
<a target="_blank" href="./images/room1bed.jpg"><img src="./images/room1bed.jpg" width="110" height="90"></a>
</div>
<div class="img">
<p>2 Bedroom</p>
<a target="_blank" href="./images/room2bed.jpg"><img src="./images/room2bed.jpg" width="110" height="90"></a>
</div>
<div class="img">
<p>Suite</p>
<a target="_blank" href="./images/roomsuite.jpg"><img src="./images/roomsuite.jpg" width="110" height="90"></a>
</div>
</aside>
基本上,我想使用JQuery append将新上传的文件添加到包含图像的div的旁边。。。
如何在上传时获取文件名并实现追加?
以下是我基本上想做的…
$( "#rooms" ).append( "<div class="img">
<p>**new description**</p>
<a target="_blank" href="./images/**uploaded file**"><img src="./images/**uploaded file**" width="110" height="90"></a>
</div>" );
我相信您只需要PHP代码就可以做到这一点(没有jquery)。
查看以下代码:
<aside id="rooms">
<h3>Room Types</h3>
<?php
$files = glob(".images/*.*");
for ($i=0; $i<count($files); $i++)
{
$j = i + 1;
$num = $files[$i];
echo '<div class="img">
<p>'.$j.' Bedroom</p>
<a target="_blank" href="./'.$num.'"><img src="./'.$num.'" width="110" height="90"></a>
</div>'
}
?>
</aside>
在AJAX成功时调用此函数:
return full File path after uploading via PHP instead of your Message like -> The file has been uploaded .....
echo json_encode(array("file_path"=>"Your_Full_Path_For_Image_Storage".$_FILES["fileToUpload"]["name"],"message"=>"The file has been uploaded.");
在Ajax参数中使用dataType=JSON。在jQueryAJAX调用成功时,说你得到了响应,responseObj。因此,将新的div附加到Rooms外部div。然后在该HTML中,将file_path作为php中AJAX调用返回的img src。
$("#rooms").append('<div class="img">
<a target="_blank" href="+responseObj.file_path+"><img src="+file_path+" width="110" height="90"></a>
</div>
相关文章:
- 正在从JQuery追加Laravel Blade
- JQuery追加到父级,只要它's已创建
- Chrome DOM 未针对 jQuery 追加/淡入进行更新
- 这两种使用 jQuery 追加 DOM 元素的方法有什么不同
- jquery 1.7追加后点击事件不起作用
- jQuery追加双引号;不能正常工作
- JQuery追加异常行为
- Jquery追加故障
- jQuery - 追加/替换事件侦听器(当事件处理程序未知时)
- jQuery追加行和列
- jQuery追加x元素的列表
- jquery追加元素位置始终为0
- 用jquery追加javascript和css
- jQuery追加函数在IE8中不起作用
- 无法与使用 jquery 追加添加的 dom 对象进行交互
- JQuery:追加在元素之前
- jQuery 追加函数中的 Javascript if 语句
- jQuery - 追加嵌入流
- 使用特定类名 JQuery 追加跨度
- Jquery 追加 html set id 到变量