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

Question

因为我有 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>

Answer 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 文档

Answer 2

在你的脚本中添加这个

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

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