Question

我想在用户将图像上传到服务器之前向用户显示图像，以确保该图像是用户想要上传的图像。

我已尝试使用$_FILES['name']['tmp_name']执行此操作并将其放入标记中，但没有任何反应。

 <form action='' method='POST'  enctype="multipart/form-data">
        <header class='pageHeading'>Kop afbeedling toevoegen</header>            
        <section class='body'>               
            <div class='inputFrame'>  


                <img src="<?php if(isset($_FILES['image']['tmp_name'])){echo $_FILES['image']['name'];}?>"/>

                        <div class='input'>
                            <div class="cellFrame">
                                <div class="inputHeading">Afbeelding uploaden</div>
                                <div class="frame">
                                    <div class="frameAlign">
                                        <div class="displayFlie">
                                            <input type='file' name='image'/>
                                        </div>
                                        <button name='upload' class='btnUpload btn'>Upload</button>
                                        <div class="clr"></div>
                                    </div>
                                </div>
                            </div>
                        </div>



                <div class="clr"></div>   
            </div>
         </form>

Answer 1

简单的解决方案 - 抓取您的图像数据转换为base64并在当前视图中输出，这样您就不需要将当前的tmp图像复制到公共位置 - 如

$imageData = file_get_contents($_FILES['image']['tmp_name']); // path to file like /var/tmp/...

// display in view
echo sprintf('<img src="data:image/png;base64,%s" />', base64_encode($imageData));

Answer 2

提交图像后，它已经在临时文件中上传到服务器。如果需要显示该临时文件中图像的内容，则需要执行一个脚本来读取该文件并使用正确的标题输出该文件。这是一个例子：

header('Content-Type: image/x-png');
readfile($_FILES['name']['tmp_name']);
exit();

Answer 3

您是否尝试直接从/ tmp文件夹中读取文件？当然这只能在上传之后发生，而不是之前发生。因此，在将文件移动到其目标文件夹之前，您必须执行此操作，但是在上载之后。

readfile($_FILES["name"]["tmp_name"]);

Answer 4

你有两种方法可以做到这一点。

第一个是在上传到服务器之前使用javascript代码显示预览，您可以查看以下答案：Image Upload with Preview and Delete

第二个是上传图片并从服务器检索缩略图以在客户端显示，您可以查看此帖子：http://www.sitepoint.com/image-upload-example/

Answer 5

如果未移动，上传到服务器的任何文件都将被自动删除。不过别担心。在上传之前，您可以使用javascript或jQuery显示它。

node dist/server.js baas_value

Answer 6

是，可以在 tmp文件夹中显示图像。为输入 type = file 添加onchange事件；会触发一个函数并加载图像。

!!! 不要忘记为img标签设置宽度

function preview() {
 $('#frame').attr('src',URL.createObjectURL(event.target.files[0]));
}

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form>
     <input type="file" onchange="preview()">
     <img src="" width="100px" height="100px" id="frame">
  </form>   
</body>

是否可以在上传之前显示tmp文件夹中的图像？

6 个答案: