输入类型=“文件”的jQuery克隆答案

【问题标题】：jQuery clone for input type="file"输入类型=“文件”的jQuery克隆
【发布时间】：2022-06-10 17:36:50
【问题描述】：

您好，我正在尝试使用类型文件的输入标签克隆一个 div，即

div 被克隆，但我在原始输入标签中上传的图像或文件没有被复制到克隆的输入标签...克隆的输入标签显示文件的名称，但是当我保存表单时它没有通过并且没有保存

$(".imageblockbtn").click(function () {
    var langid = jQuery(this).attr("id");

    $(
      `#dynamic${langid}`
    ).append(`<div class="col-12 form-group qwer" id="imageblock">
                                                <label for="imageblock">Image Block</label>
                                                <input class="imageblock" type="file" accept="image/*" name="data[${langid}][imageblock${k}]"><span class="up"></span><span
                                                class="down"></span>
                                                <button type="button" class="btn remove-dyna"><i class="material-icons" style="font-size:18px;color:red">remove_circle</i></button>

                                                <div class="dropdown">
                                                        <a class="dropbtn">Duplicate</a>
                                                        <div class="dropdown-content image_dd">

                                                        <li id="1"><a href="javascript:void(0)">English</a> </li>
                                                        <li id="3"><a href="javascript:void(0)">Chineese</a></li>
                                                        <li id="9"><a href="javascript:void(0)">German</a></li>
                                                        <li id="10"><a href="javascript:void(0)">Italian</a></li>
                                                        <li id="4"><a href="javascript:void(0)">Korean</a></li>
                                                        <li id="5"><a href="javascript:void(0)">Japanese</a></li>
                                                        <li id="6"><a href="javascript:void(0)">Spanish</a></li>
                                                        <li id="11"><a href="javascript:void(0)">Russian</a></li>
                                                        <li id="7"><a href="javascript:void(0)">Ukranian</a></li>
                                                        <li id="8"><a href="javascript:void(0)">French</a></li>

                                            </div>
                                            </div>

                                            </div>`);
    ++k;

    $(".image_dd li").each(function (index, li) {
      var lid = $(li).attr("id");
      // console.log($(li).parents(".qwer"));
      $(li).unbind("click");
      $(li).on("click", function () {
        var clone = $(li).parents(".qwer").clone(true);

        clone
          .children("h1")
          .children("input")
          .attr("name", `data[${lid}][imageblock${k}]`);
        clone.insertAfter(`#dynamic${lid}`);
        ++k;
        alert("Duplicated");
      });
    });
  });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript php jquery laravel clonenode

【解决方案1】：

这是因为 jQuery 中的 clone 不会复制输入的所有关联关系，而只会复制结构和属性。 <Select> 标记在克隆时也会发生同样的情况，在某些情况下会丢失该值。为了解决这个问题，请在克隆后设置值。这部分在另一个问题中回答。检查这个：Copy/Clone files from File Input to another Input

【讨论】：