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

首先在ajax请求中将数据类型html传递为dataType: "html",

然后，如果要在<div id="targetLayer">No Image</div>中加载图像，则必须从PHP脚本中复制echo图像，例如：

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

而且，我不知道为什么在class="image-preview"标签中使用2个类class="upload-preview"和<img>？

最后，您的代码中也有一个错字，您正在使用name="fileToUpload"，但是在php中，您正在使用$_FILES['filetoUpload']来获取记录，这会给您未定义的索引通知 >

Answer 2

您可以使用类名而不是div的id来同时使用jQuery显示结果。

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

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

Answer 3

在while (p != NULL) { struct node * const next = p->next; free(p); p = next; }之后创建<div id="outputLayer"></div>，并将<h2 class="outputImage-text text-center">Output Image</h2>替换为$("#targetLayer").html(data);

使用Ajax在提交时显示两个图像

3 个答案: