克隆html表单标签后未显示图像预览 [英] Image preview not showing after cloning html form tag

问题描述

我使用html，jQuery，Ajax和Javascript创建了一个嵌套的注释系统.对于每个答复按钮，我创建了与原始消息相同的输入功能，其中包括:(1)上传之前的图像预览，和(2)上传图像.我使用jQuery克隆方法来完成此操作.

I have created a nested comment system using html, jQuery, Ajax, and Javascript. For each reply button, I have created the same input features as the original message, which includes: (1) image preview before upload, and (2) image upload. I used jQuery clone method to accomplish this.

但是，按下回复按钮并克隆表格后，它会在原始邮件而不是回复邮件上显示图像预览.

However, after pressing the reply button and cloning the form, it shows the image preview on the original message rather than on the reply message.

这是JS Bin的链接: https://jsbin.com/xexejur/edit?html，js，输出

Here is the link to JS Bin: https://jsbin.com/xexejur/edit?html,js,output

这是代码:

html

<form id="form_clone" method="post" enctype="multipart/form-data">
  <div>
    <img id="image_Preview" width="100" height="100" />
    <input type="file" onchange="document.getElementById('image_Preview').src = window.URL.createObjectURL(this.files[0])">
  </div>
  <div>
    <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
  </div>
</form>

<div>
 <button type="button" class="btn btn-default reply">Reply</button>
</div>

JavaScript

Javascript

$(document).ready(function(){

    $(document).on('click', '.reply', function(event){
      var form_clone = $('#form_clone').clone();
      var target = $(event.target);
      var isFormAvailable = $('#form_clone', target).length > 0;
      if(!isFormAvailable) {
        $(event.target).append(form_clone);
      }
    });

}); 

推荐答案

$(document).ready(function() {
    var cloneCount = 0;
    var bindFileChange = function (cloneCount){
        let fileInput = $('input[type="file"][data-count="' + cloneCount +'"]');
        fileInput.on('change', function (){
            $(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    };


   $("button").click(function(){
       cloneCount++;
       $("#id0").clone().attr('id', 'id'+ cloneCount).insertAfter("#id" + (cloneCount - 1));
       $('#id' + cloneCount).find('input[type="file"]').first().attr('data-count', cloneCount);
       bindFileChange(cloneCount);
   }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id0" method="post" enctype="multipart/form-data" data-count="0">
    <div>
        <img class="image_Preview" width="100" height="100" />
        <input type="file" class="fileUpload" data-count="0">
    </div>
    <div>
        <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
</form>
<button id="click">Reply</button>

看到您的js bin后，我将更新此答案.由于您已为其分配了ID，因此它正在更新图像预览. ID应该是唯一的.因此，首先，我将从您的img元素中删除id属性，并在您的文件输入中删除该change事件，稍后我们可以将其与js动态绑定.为了通过js定位元素，尽管我们需要保留答复的数量，对于data attributes来说，这很方便.

I'll update this answer after seeing your js bin. It's updating the image preview because you have an id assigned to it. Id's should be unique. So first off I would remove the id attribute from your img elements and also remove the change event on your file input, we can bind it dynamically with js later. In order to target the elements with js though we're going to need to keep a count of the replies, data attributes are handy for this.

<form id="id0" method="post" enctype="multipart/form-data" data-count="0">
    <div>
        <img class="image_Preview" width="100" height="100" />
        <input type="file" class="fileUpload" data-count="0">
    </div>
    <div>
        <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
</form>
<button id="click">Reply</button>

现在，对于js，您在增加表单ID的正确位置上.我们也需要将其应用于其他元素，以便我们可以将它们作为目标.

Now for the js, you're on the right track incrementing the form's id. We need to apply this to other elements too so we can target them.

$(document).ready(function() {
    var cloneCount = 0;
    var bindFileChange = function (cloneCount){
        let fileInput = $('input[type="file"][data-count="' + cloneCount +'"]');
        fileInput.on('change', function (){
            $(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    };


   $("button").click(function(){
       cloneCount++;
       $("#id0").clone().attr('id', 'id'+ cloneCount).insertAfter("#id" + (cloneCount - 1));
       $('#id' + cloneCount).find('input[type="file"]').first().attr('data-count', cloneCount);
       bindFileChange(cloneCount);
   }); 
});

这篇关于克隆html表单标签后未显示图像预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！