Question

我有2个Div Box。一个是Input，另一个是Output Div Box，如下图所示。

现在我正在做的是使用PHP的帮助上载图像。然后将相同的图片上传到名为Input和Output的两个文件夹中。

我想要的是，当我单击“提交”按钮时，输入文件夹中的图像应显示在输入框上，而输出文件夹图像应显示在输出文件夹中。

我可以在输出Div中显示Input文件夹图像，但不能显示Output文件夹图像。

这是我的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>

Answer 1

使用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的信息，请参见this文档

Answer 2

在您的脚本中添加

$（“。outputDiv”）。html（data）;

Answer 3

我更改了您的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>

一键显示两个图像。 PHP，AJAX

3 个答案: