是否可以在上传之前显示tmp文件夹中的图像 - Is it possible to show a image that is in a tmp folder before upload?

Is it possible to show a image that is in a tmp folder before upload?

本文关键字：tmp 显示文件夹图像是否 | 更新日期: 2023-09-27

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

我试着用$_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>

简单的解决方案-获取图像数据转换为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));

提交图像后，它已经以临时文件的形式上传到服务器。如果您需要显示该临时文件中图像的内容，那么您需要编写一个脚本，读取该文件并用正确的标题输出该文件。这里有一个例子：

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

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

<form>
 <input type="file" accept="image/*" name="" onchange="previewImage()">
 <img id="preview">
</form>
<script>
 function previewImage(){
  var previewBox = document.getElementById("preview");
  previewBox.src = URL.createObjectURL(event.target.files[0]);
 }
</script>

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

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

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

第一种是在上传到服务器之前使用javascript代码显示预览，你可以检查这个答案：使用预览和删除的图像上传

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

是，可以在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>