同一页面上的相同jquery函数

Question

大家好我正在建立一个使用表单

预览图像文件的网站

这是代码

<script type="text/javascript">
    $(function(){
        $("#ImageFile").on("change", function(){
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
            if (/^image/.test( files[0].type)){ // only image file
                var reader = new FileReader(); // instance of the FileReader
                reader.readAsDataURL(files[0]); // read the local file
                reader.onloadend = function(){ // set image data as background of div
                    $("#uploadImagePreview").css("display","block");
                    $("#imagePreview").css("background-image", "url("+this.result+")");
                    $("#imagePreview").css("max-height","100px");    
                    $("#imagePreview").css("height","100px"); 
                }
            }
        });
    });
</script>  

它工作完美，但我有3个格式在同一页面上使用此功能，但只适用于第一个我在构建表格时测试它并在每个上工作但是在添加一个预览停止后，第三个执行与第二个相同的是我做错了或者你认为我怎么能解决它

这是html

    <div class="col-md-6">
  <div class="form-group">
    <label for="exampleInputFile"  class="supercell">Shield</label>
     <input type="file" id="ImageFile" name="ImageFile"/>
  </div>
  </div>
  <div class="col-md-6">
          <div id="uploadImagePreview">
             <div id="imagePreview"></div>
        </div>
  </div>