Поскольку у меня есть 2 Div Box. Один входной, а другой выходной Div Box, как показано на изображении ниже:
Теперь я загружаю изображение с помощью справки 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>






Добавьте это в свой скрипт
$(".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>
Вернуть входные и выходные файлы в формате массива следующим образом
<?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" />';Большое спасибо Бро. Вы спасли мою жизнь . Действительно очень ценится
Я изменил ваши 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>
он покажет то же входное изображение в div выходного контейнера. Но он хочет отобразить изображение из выходного каталога