使用 Ajax 提交时显示两个图像

Posted 2023-05-08

【中文标题】使用 Ajax 提交时显示两个图像

【英文标题】：Display Two Images On Submit Using Ajax

【发布时间】：2019-11-15 03:36:05

【问题描述】：

假设我有两个 div 框，如下所示：

所以我所做的是当我单击提交按钮时，图像会上传到无图像部分。 但是当我单击按钮一次时，我也想要什么。图像应该加载到两个盒子上。

这是我的 html：

<div class="container">
  <div class="row">

    <div class="col-md-6">
      <h2 class="inputImage-text text-center">Input Image</h2>
       <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
       <div id="targetLayer">No Image</div>
       <div id="uploadFormLayer">
       <input name="fileToUpload" type="file" class="inputFile" /><br/>
       <input type="submit" value="Submit" class="btnSubmit btn btn-primary" />
       </div>
       </form>
    </div>

    <div class="col-md-6">

      <h2 class="outputImage-text text-center">Output Image</h2>

    </div>


   </div>
</div>

这是我的 AJAX 脚本：

<script type="text/javascript">
$(document).ready(function (e) 
    $("#uploadForm").on('submit',(function(e) 
        e.preventDefault();
        $.ajax(
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),

            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            
            $("#targetLayer").html(data);

            ,
            error: function() 
            
                       
       );
    ));
);
</script>

这是我用于加载的 PHP 代码

<?php
if(is_array($_FILES)) 
if(is_uploaded_file($_FILES['filetoUpload']['tmp_name'])) 
$sourcePath = $_FILES['filetoUpload']['tmp_name'];
$targetPath = "images/".$_FILES['filetoUpload']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) 
?>
<img class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
<?php



?>

【问题讨论】：

你不会在 php 中回显你的图像

您的问题仍未解决，您还在搜索吗？如果不是，则接受关闭此问题的最佳答案。

【参考方案1】：

首先将 ajax 请求中的数据类型 html 传递为 dataType: "html",

然后，如果要在<div id="targetLayer">No Image</div> 中加载图像，则必须从 PHP 脚本中加载echo 图像，例如：

echo '<img src="<?php echo $targetPath; ?>" />';

如果您想在两个框中加载图像，请在此处创建另一个 div：

<div class="col-md-6">
<h2 class="outputImage-text text-center">Output Image</h2>
<div id="boxTwo"></div>
</div>

在 jQuery 中，使用这个：

$("#targetLayer").html(data);
$("#boxTwo").html(data);

而且，我不知道你为什么在 <img> 标签中使用 2 个类 class="image-preview" 和 class="upload-preview"？

最后，您的代码中还有一个错字，您使用的是name="fileToUpload"，但在 php 中您使用$_FILES['filetoUpload'] 获取记录，这将为您提供未定义索引通知

【讨论】：

我得到了你的答案，但是如果我想在同一个 AJAX 命令的另一个框中显示不同的图像。我可以这样做吗？

@AbnitChauhan：是的，为什么不呢，如果您从 php 脚本中获取 2 张图像，那么您可以对这两个图像使用数组并使用 json_encode 进行打印，但在 ajax 中您必须定义 datatype = json

【参考方案2】：

您可以使用类名而不是使用 div 的 id 来显示使用 jQuery 的结果。

   $(".targetLayer").html(data);

<div id="targetLayer" class="targetLayer">No Image</div>
<h2 class="outputImage-text text-center targetLayer">Output Image</h2>

【参考方案3】：

在<h2 class="outputImage-text text-center">Output Image</h2> 之后创建<div id="outputLayer"></div> 并将$("#targetLayer").html(data); 替换为$("#targetLayer").add('#outputLayer').html(data);

【讨论】：

你是对的。我可以使用相同的 html(data)。对于另一个盒子。但是如果我想在另一个 div 框中添加不同的图像怎么办。

@AbnitChauhan：你可以做到，但问题是，你从哪里得到第二张图片？

我正在通过 python 脚本处理图像并获取变量。将包含在 src 中的 python 代码可以正常工作，但唯一的问题是如何处理来自单个 Ajax 脚本的两个图像？ @devpro

@AbnitChauhan：你只从你的脚本中加载了一张图片，第二张图片在哪里？请添加您的问题