一次单击即可显示两个图像。PHP、AJAX

因为我有两个盒子。一个是输入，另一个是输出Div框，如下图所示：

现在我所做的是使用PHP上传图像。并在两个名为Input和Output的文件夹中上载相同的图像

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

我可以显示输入文件夹图像，但无法在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
        }
    }
}
?>

“class=”上传预览“/>

下面是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>

$（文档）.ready（函数（e）{
$（“#uploadForm”）。在（'submit'，（函数（e）上{
e、 预防默认值（）；
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：新表单数据（本），
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
$（“#targetLayer”）.html（数据）；
},
错误：函数（）{}
});
}));
});

将此添加到脚本中

---

$（“.outputDiv”）.html（数据）；

使用

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>

$（文档）.ready（函数（e）{
$（“#uploadForm”）。在（'submit'，（函数（e）上{
e、 预防默认值（）；
$.ajax({
url:“upload.php”，
类型：“POST”，
数据类型：“json”，
数据：新表单数据（本），
contentType:false，
cache:false，
processData:false，
成功：功能（数据）
{
$（“#targetLayer”）.html（data.input\u文件）；
$（“.outputDiv”）.html（data.output\u文件）；
},
错误：函数（）
{
}           
});
}));
});

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

<?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);
?>

---

请参阅有关

数据类型的文档

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

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

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

在jquery脚本中，我用src替换了所有img标记

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

输入图像
无图像


输出图像
$（文档）.ready（函数（e）{
$（“#uploadForm”）。在（'submit'，（函数（e）上{
e、 预防默认值（）；
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：新表单数据（本），
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
var response=JSON.parse（数据）；
if（response.inputImage！=“”&response.outputPath！=“”）{
$（“#输入文件视图”）.attr（“src”，response.inputImage）；
$（“#输出文件视图”）.attr（“src”，response.outputPath）；
}
},
错误：函数（）
{
}           
});
}));
});

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

$uploadedFiles['input_file']='“class=”upload preview“/>$上传文件['output_file']='“class=”upload preview“/>”；

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