JQuery input file类型（图片）上传前回显动态添加

html基本结构

<div id="goods-pic-box" class="d-flex flex-wrap border p-3 mb-3" style="border-radius:10px;">
{if $goods.goods_pictures}
 {volist name="$goods.goods_pictures" id="p"}

 <div id="pic-{$p.id}" class="pic">
   <div class="item border p-1 m-2 shadow-sm">
     <img src="__UPLOADS__/{$p.img_url}" class="img-fluid" />
   </div>
   <div class="xx">

     <a href="#" class="close text-danger" data-id="{$p.id}" >
       <i class="fas fa-times-circle"></i>
     </a>
   </div>
 </div>

 {/volist}
 {/if}
</div>

  //绑定表单控件
     var gbox=$("#goods-pic-box");
      $('#goods-pic-img').on('change', function() {
        // document.getElementById('goods-pic-img').addEventListener('change', function() {
           gbox.find(".itm2").remove(); // 仅清空动态添加的预览图片区
      
          var files = $(this).prop('files');

          // var files = $(this)[0].files

          // gbox.empty();
          // console.log('当前文件数',files);
          // console.log('当前文件长度',files.length);
          // return false;
         
          $.each(files, function(i, file) {

              if (/^image\//i.test(file.type)) { // 确保文件是图片
                  var reader = new FileReader();
                  reader.onload = function(e) {

                      gbox.append(`
                      <div id="pic-pls-${i}" class="pic itm2 ">
                        <div class="item border p-1 m-2 shadow-sm">
                          <img src="${e.target.result}" class="img-fluid"/>
                        </div>
                        <div class="xx">
                          <a href="#" data-id="${i}" class="minus text-danger">
                            <i class="fas fa-minus-circle fa-1x"></i>
                          </a>
                        </div>
                      </div>`
                      );
                  }
                  reader.readAsDataURL(file); // 读取文件内容
              }
          });


      });

当动态添加的图片，需要删除时调用以下方法，同步更新input file 表单数据，方便随时传后台处理

 //移除input控件中的数据
  function removeFile(index) {
         var input = document.getElementById('goods-pic-img');
         var files = input.files;
         // 创建一个新的 DataTransfer 对象来存储剩余的文件
         var newFiles = new DataTransfer();
         for (var i = 0; i < files.length; i++) {
           if (i!== index) { // 不移除指定索引的文件
             newFiles.items.add(files[i]);
           }
         }
         // 用新的文件列表更新 input 并触发 change 事件
         input.files = newFiles.files;
         setTimeout(() => {
           input.dispatchEvent(new Event('change'));
         }, 500);
         
 
   }

如果需要动态监听添加的图片或元素,比如为了实现拖拽，可以引入以下监听方法

//监听dom 动态变化 以便于让拖拽实例化动态元素

     // 选择目标节点
     var targetNode = document.getElementById('goods-pic-box');
     // 创建一个观察者对象
     var observer = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {
         // console.log(mutation);
         // 这里可以执行你想要的操作，比如更新UI或者其他
       });
     });

     // 观察者的配置（观察目标节点的子节点的变化）
     var config = { childList: true, subtree: true };
     // 传入目标节点和观察选项并开始观察
     observer.observe(targetNode, config);
       
     // 以后，你可以停止观察
     // observer.disconnect();

     // 初始化Sortable
     new Sortable(targetNode, {
       animation: 150, // 动画持续时间
       ghostClass: 'blue-background-class' // 拖动时的虚影类名
     });