0

我正在尝试在我的代码中实现 PanZoom JS 功能。当我将静态图像添加到网页并向其添加 PanZoom 功能时，代码工作正常。

例如：

>>HTML

<div class="imageSection"> 
    <div class="image-box" id="targetLayer">
    <img id="scene" class="image-preview" src="uploads/Jack-Ceph.jpg" class="upload-preview" />
    </div> 
</div>

>>JS
  var element = document.getElementById('scene')
  panzoom(element,{
  maxZoom: 5,
  minZoom: 0.5,
  transformOrigin: {x: 0.5, y: 0.5}
 })

但问题是，当我使用 Jquery POST 方法和 PHP 动态添加图像时，PanZoom JS 停止工作。

我尝试动态添加图像的代码是：

HTML

 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
  <input id="picture" name="picture" type="file" >
  <p>Drag your files here or click in this area.</p> 
  <button id="upload" name="upload" type="submit">Upload</button> 
 </form>

JS

// Upload image using Ajax
  $(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() 
          {
          }             
       });
    }));
  });

上传.php

if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['picture']['tmp_name'])) {
$sourcePath = $_FILES['picture']['tmp_name'];
$targetPath = "uploads/".$_FILES['picture']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img id="scene" class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
<?php
}
}
}

所以当我运行上面的代码时，我得到了错误：

未捕获的错误：无法在 createPanZoom 处为当前类型的 dom 元素创建 panzoom

并且 Panzoom 效果不起作用。

4

0 回答 0