Question

我已经设计了一个小型Web应用程序，需要按用户选择图像并将其显示在浏览器中，而我做到了，现在要用户单击该img，将打开新的浏览器标签并将img显示为完整的高度和宽度。 “现在，当用户单击最近上传的图像时，将在新选项卡中显示完整的H和W。” 我的html代码：

<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>

我的脚本：

<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");
            }
        });

    });
});

我的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

所以您想将图像显示为在新标签页/窗口中打开的链接？试试这个：

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

这会将每个图像包装在一个链接中，当您单击该链接时，由于target="_blank"属性，将打开一个新标签并显示完整尺寸的图像。

Answer 2

这就是您所需要的；

if(move_uploaded_file($sourcePath, $targetPath)) {
    $ouput .= '<a href="'.$targetPath.'" target="_blank"><img src="'.$targetPath.'" width="150px" height="180px"></a>';
}

上传img，然后单击它以显示在新标签中

2 个答案: