Display Two Images on One Click. PHP, AJAX

Question

As I Have 2 Div Boxes. One is Input and the other one is Output Div Box as Shown in the Image Below.:

Now What I am doing is I am uploading the Image using the Help of PHP. And uploading same image on two folders named Input and Output.

What I want is When I Click Submit Button the image from input folder should be shown on Input Box and the Output Folder Image to be shown In Output Folder.

I am able to show the Input folder Image but not able to show the Output folder Image in output Div.

Here is my HTML Code :

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

Here is my php Script:

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

and Here is the AJAX Code :

<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

Use dataType option to accept the response in JSON format.

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

Return both input and output files in an array format as follows

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

Refer to this documentation regarding dataType

Answer 2

I have changed your php, html and jquery. You need to add jsonarray instead of html because it would be easy to put multiple data in json array and can get it easily in jquery .

In html i have added img tag to display image in output.

In php script, I have removed html and added json array for both the images.

In jquery script, I have replaced all img tag with 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>

Answer 3

Add this with in your script

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