Отображение двух изображений в один клик. PHP, АЯКС

Поскольку у меня есть 2 Div Box. Один входной, а другой выходной Div Box, как показано на изображении ниже:

Отображение двух изображений в один клик. PHP, АЯКС

Теперь я загружаю изображение с помощью справки 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>
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
0
193
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Добавьте это в свой скрипт

$(".outputDiv").html(данные);

он покажет то же входное изображение в div выходного контейнера. Но он хочет отобразить изображение из выходного каталога

Vinay Patil 05.07.2019 08:10
Ответ принят как подходящий

Используйте опцию 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

$uploadedFiles['input_file'] = '<img class = "image-preview" src = "<?php echo $targetPath; ?>" class = "upload-preview" />'; $uploadedFiles['output_file'] = '<img class = "image-preview" src = "<?php echo $outputImage; ?>" class = "upload-preview" />';
Chempooro 05.07.2019 09:03

Большое спасибо Бро. Вы спасли мою жизнь . Действительно очень ценится

Chempooro 05.07.2019 10:03

Я изменил ваши 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>

Другие вопросы по теме