一键显示两个图像。 PHP, AJAX

Posted 2023-05-08

【中文标题】一键显示两个图像。 PHP, AJAX

【英文标题】：Display Two Images on One Click. PHP, AJAX

【发布时间】：2019-11-15 17:44:18

【问题描述】：

因为我有 2 个 Div 框。一个是 Input，另一个是 Output Div Box，如下图所示：

现在我正在做的是使用 php 的帮助上传图像。并将相同的图像上传到名为 Input 和 Output 的两个文件夹中。

我想要的是当我单击提交按钮时，输入文件夹中的图像应显示在输入框上，输出文件夹图像应显示在输出文件夹中。

我可以显示输入文件夹图像，但无法在输出 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 class="outputDiv">
            </div>
        </div>
    </div>
</div> 

这是我的 php 脚本：

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

<?php
        
    

?>

这里是 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>

【参考方案1】：

使用dataType 选项接受JSON 格式的响应。

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

            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            

                 $("#targetLayer").html(data.input_file);
                 $(".outputDiv").html(data.output_file);

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

以数组格式返回输入和输出文件，如下所示

<?php
    $uploadedFiles = [];
    if(is_array($_FILES)) 
        if(is_uploaded_file($_FILES['fileToUpload']['tmp_name'])) 
            $sourcePath = $_FILES['fileToUpload']['tmp_name'];
            $targetPath = "input/".$_FILES['fileToUpload']['name'];
            $outputImage = "output/".$_FILES['fileToUpload']['name'];
            if(move_uploaded_file($sourcePath,$targetPath)) 
                copy($targetPath, $outputImage);
                $uploadedFiles['input_file'] = '<img class="image-preview" src="'.$targetPath.'" class="upload-preview" />';
                $uploadedFiles['output_file'] = '<img class="image-preview" src="'.$outputImage.'" class="upload-preview" />';
            
        
    
    echo json_encode($uploadedFiles);
?>

关于dataType，请参阅this 文档

【讨论】：

$uploadedFiles['input_file'] = '<img class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />'; $uploadedFiles['output_file'] = '<img class="image-preview" src="<?php echo $outputImage; ?>" class="upload-preview" />';

非常感谢兄弟。你救了我的命 。真的很感激

【参考方案2】：

在你的脚本中添加这个

$(".outputDiv").html(数据);

【讨论】：

它将在输出容器 div 中显示相同的输入图像。但他想显示输出目录中的图像

【参考方案3】：

我已经更改了您的 php、html 和 jquery。您需要添加 jsonarray 而不是 html 因为它很容易将多个数据放入 json 数组中并且可以很容易地在 jquery 中获取它。

在 html 中，我添加了 img 标记以在输出中显示图像。

在 php 脚本 中，我已删除 html 并为两个图像添加了 json 数组。

在 jquery 脚本 中，我已将所有 img 标签替换为 src。

<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 <img src="" id="intput-file-view"/></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 class="outputDiv">
          <img src="" id="output-file-view"/>
      </div>
    </div>
   </div>
</div>

<?php
if(is_array($_FILES)) 
    if(is_uploaded_file($_FILES['fileToUpload']['tmp_name'])) 
        $sourcePath = $_FILES['fileToUpload']['tmp_name'];
        $targetPath = "input/".$_FILES['fileToUpload']['name'];
        $outputImage = "output/".$_FILES['fileToUpload']['name'];
        if(move_uploaded_file($sourcePath,$targetPath)) 
            copy($targetPath, $outputImage);

            echo json_encode(array("inputImage"=>$targetPath,"outputPath"=>$outputImage));
             exit;       
        
        echo json_encode(array("inputImage"=>"","outputPath"=>""));
             exit;  
    

?>  
<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)
             var response=JSON.parse(data);
             if(response.inputImage != "" && response.outputPath != "")
             $("#intput-file-view").attr("src",response.inputImage);
             $("#output-file-view").attr("src",response.outputPath);
            
            ,
            error: function() 
            
                       
       );
    ));
);
</script>