如何实现多组独立的jQuery文件上传图片预览（对应不同ID容器）

嗨，我一眼就看出你的问题所在啦——现在不管用哪个文件输入框上传图片，所有图片都会跑到所有myImg开头的容器里，对吧？这是因为你在imageIsLoaded函数里用了$('div[id^=myImg]')，这个选择器会选中所有ID以myImg开头的div，所以每次上传都会把图片加到所有匹配的容器中。

咱们可以给每组文件输入框和对应的预览容器建立专属关联，轻松实现独立预览，具体做法如下：

第一步：修改HTML，给每个输入框绑定目标容器 #

给每个<input type="file">添加一个data-target属性，值就是对应预览容器的选择器（比如#myImg1），这样我们就能明确知道这个输入框的图片要放到哪个容器里：

<input type="file" multiple data-target="#myImg1"/>
<div id="myImg1"></div>
          
<p>Геоморфология</p> 
<input type="text" placeholder="" name="place" class="input"/><br>
<input type="file" multiple data-target="#myImg2"/> 
<div id="myImg2"></div>    

第二步：修改jQuery代码，精准定位目标容器 #

调整JS逻辑，在文件上传的change事件里获取当前输入框对应的目标容器，然后把图片只插入到这个容器中：

$(function() {
    $(":file").change(function() {
      // 获取当前输入框对应的预览容器选择器
      const targetContainer = $(this).data('target');
      if (this.files && this.files[0]) {
        for (var i = 0; i < this.files.length; i++) {
          var reader = new FileReader();
          // 用闭包保存目标容器，避免循环变量的作用域问题
          (function(container) {
            reader.onload = function(e) {
              // 只把图片插入到对应的容器里
              $(container).append('<img src="' + e.target.result + '">');
            };
          })(targetContainer);
          reader.readAsDataURL(this.files[i]);
        }
      }
    });
  });

如果你想保留原来的imageIsLoaded函数，也可以改成带参数的形式，让它接收目标容器：

$(function() {
    $(":file").change(function() {
      const targetContainer = $(this).data('target');
      if (this.files && this.files[0]) {
        for (var i = 0; i < this.files.length; i++) {
          var reader = new FileReader();
          reader.onload = function(e) {
            imageIsLoaded(e, targetContainer);
          };
          reader.readAsDataURL(this.files[i]);
        }
      }
    });
  });
  
  function imageIsLoaded(e, container) {
    $(container).append('<img src="' + e.target.result + '">');
  };

为什么这样能解决问题？ #

原来的代码会一次性选中所有myImg开头的容器，现在我们通过data-target给每个输入框绑定了专属的预览容器，每次上传时只会把图片插入到对应的容器中，这样就实现了多组独立的图片预览啦～而且这种写法扩展性很强，以后再加第三组、第四组，只需要给新的输入框加上data-target="#myImg3"之类的属性，完全不用改JS代码！

备注：内容来源于stack exchange，提问作者amoudaria