使用上传按钮在网格列中以行方式上传图像

Question

我需要在上传到网格列之前上传显示它的成员的照片。每行都会有不同的照片供上传。我在grid列的item模板中添加了image列。我正在使用文件阅读器将照片上传到网格，但每次我将其上传到下一行网格时，它都会替换第一行上传的图像。我想以行方式上传它。

 <asp:TemplateField HeaderText="Upload Photo">
  <ItemTemplate>
    <table border="0">
      <tr>
        <td style="padding-left: 11px"><div style="vertical-align: top; padding-left: 11px" id="ImageHolderAddEnrollee"> <img alt="Upload your photo" src="/images/DefaultView.gif" style="width: 50px; height: 50px" /> </div>
         <asp:FileUpload runat="server" ID="EnrolleeFileUpload" CssClass="file-upload-button" /></td>
      </tr>
    </table>
  </ItemTemplate>
</asp:TemplateField>

预览和上传照片的jQuery代码 -

$('#<%=grdEnorlleeAdditionalInfo.ClientID %>').find('input:file[id$="EnrolleeFileUpload"]').on('change', function () {
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  var image_holder = $("#ImageHolderAddEnrollee");
  image_holder.empty();
          var reader = new FileReader();
          reader.onload = function (e) {
              $("<img />", {
                  "src": e.target.result                                      
              }).appendTo(image_holder);
          }
          image_holder.show();
          reader.readAsDataURL($(this)[0].files[0]);
      }