使用上传按钮在网格列中按行上传图像答案

【问题标题】：Upload Image row wise in a grid column with upload Button使用上传按钮在网格列中按行上传图像
【发布时间】：2016-12-17 16:44:56
【问题描述】：

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

 <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]);
      }

【问题讨论】：

标签： jquery asp.net gridview file-upload

【解决方案1】：

对于这种类型的需求，我们可以使用网格列内的用户控件，如下所示：

来自用户控件 .ascx 文件的代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UploadPhoto.ascx.cs" Inherits="WebApplication5.UserControls.WebUserControl1" %>

并将文件阅读器的预览代码添加到这个.ascx页面的标签中。

 <asp:Label ID="lblImage" runat="server"><img id="DefaultImage" src="images/DefaultView.gif" style="width:50px;height:50px;"/>
</asp:Label><asp:FileUpload id="ImageUpload" runat="server" />




<script  type="text/javascript">
      $(document).ready(function () {
            $('#<%=ImageUpload.ClientID%>').on('change', function () 
            {
                var imgPath = $(this)[0].value;
                var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                var image_holder = $("#<%=lblImage.ClientID%>");{
                           image_holder.empty();
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $("<img />", {
                                    "src": e.target.result,
                                    "ID": "DefaultImage"
                                }).appendTo(image_holder);
                            }
                            image_holder.show();
                            reader.readAsDataURL($(this)[0].files[0]);
                        }
                });
        });

</script>

完成后，将用户控制页面的引用添加到要添加网格列的父页面，只需将文件上传的用户控件添加到网格列的项目模板中。

<asp:TemplateField HeaderText="Upload Photo">
                                                <ItemTemplate>
                                                    <uc:ImageUpload id="ImageUpload" runat="server" />

                                                </ItemTemplate>

                                            </asp:TemplateField>

这将允许通过不同的用户控制文件上传将照片上传到网格的每一行。

【讨论】：