CODEWITHSUNDEEP
javascriptphpjqueryajaxfile-upload
Chempooro
Chempooro

Reputation: 435

Display Two Images On Submit Using Ajax

Suppose I have two div boxes as shown below :

enter image description here

So What I did is when I click on submit Button the image gets uploaded on the no Image Section. But What I also want that When I click the button one time . the Image should be loaded on both the boxes .

This is my 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>

Here is my AJAX Script : 

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

And Here is my Php code for Loading 

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

Upvotes: 0

Views: 93

Answers (3)

devpro
devpro

Reputation: 16117

First of all pass datatype html in ajax request as dataType: "html",

Then, if you want to load image in <div id="targetLayer">No Image</div> then you must need to echo image from PHP script like:

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

if you want to load image in both boxes then create one another div here:

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

and in jQuery, use this:

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

And, i have no idea why are you using 2 classes class="image-preview" and class="upload-preview" in <img> tag?

In last, you have one typo also in your code, you are using name="fileToUpload" but in php you are fetching the record with $_FILES['filetoUpload'] which will give you UNDEFINED INDEX NOTICE

Upvotes: 1

Аслан Алункачев
Аслан Алункачев

Reputation: 31

Create <div id="outputLayer"></div> after <h2 class="outputImage-text text-center">Output Image</h2> and replace $("#targetLayer").html(data); with $("#targetLayer").add('#outputLayer').html(data);

Upvotes: 0

Esar-ul-haq Qasmi
Esar-ul-haq Qasmi

Reputation: 1084

You can use class name instead of using id of the div to show the results in both using jQuery.

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

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

Upvotes: 0

Related Questions