使用PHP上传图像并附加JQuery

Question

我有一个简单的管理页面，用于编辑主页面上的内容。

在管理页面上，您可以上传文件。 （哪个有效）

这是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追加将新上传的文件添加到包含图像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>" );

Answer 1

我相信你只需要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>

Answer 2

在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。 而在jQuery中，AJAX Call成功说你得到了响应，responseObj。 所以将新div添加到Rooms外部div。然后在该HTML中，将file_path作为img src，由php中的AJAX调用返回。

$("#rooms").append('<div class="img">
                <a target="_blank" href="+responseObj.file_path+"><img src="+file_path+" width="110" height="90"></a>                 
            </div>