上传图片并单击它以显示在新标签中

Question

I have worked out a little web app, need to select images by user and show it in the browser, and I did that, now want the user if click on that img, will open new browser tab and show the img as full Hight and Width. "Now when user click on the uploaded image that has recently uploaded them will appear in new tab and full H and W." my html code:

<div id="wrapper">
    <div id="content">
    <div class="container" style="color: white">

        <div class="row" style="margin-top: 150px; color: white">
            <div class="col-md-3"></div>
            <div class="col-md-6" id="double">
                <h2>Please Upload Your Images</h2>
                <form id="uploadForm" action="upload.php" method="post">
                    <h4>Select an Image</h4> <input name="files[]" type="file" multiple /><br /><br />
                    <input type="submit" value="Submit"/>
                </form>
            </div>
            <div class="col-md-3">
            </div>
        </div>

        </div>
</div>

my script:

<script>
    $(document).ready(function(){
        $('#uploadForm').on('submit', function(e){
            e.preventDefault();
        $.ajax({
            url : "upload.php",
            type : "POST",
            data : new FormData(this),
            contentType : false,
            processData : false,
            success : function(data){
                $('#gallery').html(data);
                alert("Image Uploaded");
            }
        });

    });
});

my php:

<?php 
//upload.php

$output = '';

if(is_array($_FILES)){
foreach ($_FILES['files']['name'] as $name => $value) {

    $file_name = explode(".", $_FILES['files']['name'][$name]);
    $allowed_ext = array("jpg", "jpeg", "png", "gif", "pdf");

    if (in_array($file_name[1], $allowed_ext)) {
        $new_name = md5(rand(). '.' . $file_name[1]);
        $sourcePath = $_FILES['files']['tmp_name'][$name];
        $targetPath = "upload/" . $new_name;

        if (move_uploaded_file($sourcePath, $targetPath)) {
            $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';
        }
    }
}
echo $output;
}

?>

Answer 1

So you want to display the images as a link which opens in a new tab / window? Try this:

<?php
  echo '<a href="'.$LinkToFullSizeImage.'" target="_blank"><img alt="myAltText" src="'.$LinkToFullSizeImage.'" width="150px" height="180px"></a>';
?>

This will wrap each image in a link that will, when clicked, open a new tab with the full size image displayed because of the target="_blank" attribute.