Отображение двух изображений при отправке с использованием Ajax

Question

Предположим, у меня есть два блока 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>


   </div>
</div>

Вот мой сценарий 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>

А вот мой код Php для загрузки

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

Answer 1

Вы можете использовать имя класса вместо идентификатора div, чтобы показать результаты в обоих случаях, используя jQuery.

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

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

Answer 2

Создать <div id="outputLayer"></div> после <h2 class="outputImage-text text-center">Output Image</h2> и заменить $("#targetLayer").html(data); на $("#targetLayer").add('#outputLayer').html(data);

Answer 3

Сначала передайте тип данных html в запросе ajax как dataType: "html",

Затем, если вы хотите загрузить изображение в <div id="targetLayer">No Image</div>, вам необходимо echo изображение из сценария PHP, например:

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

если вы хотите загрузить изображение в оба поля, затем создайте друг друга div здесь:

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

и в jQuery используйте это:

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

И я понятия не имею, почему вы используете 2 класса class="image-preview" и class="upload-preview" в теге <img>?

Наконец, у вас есть одна опечатка в вашем коде, вы используете name="fileToUpload" но в php вы извлекаете запись с $_FILES['filetoUpload'], что даст вам УВЕДОМЛЕНИЕ О НЕОПРЕДЕЛЕННОМ ИНДЕКСЕ