画像をアップロードしてグリッド列に画像をアップロードするボタン

Question

グリッドの列にアップロードする前に表示しているメンバーの写真をアップロードする必要があります。各行はアップロードのために異なる写真を持っています。グリッドカラムのアイテムテンプレートの中にイメージカラムを追加しました。私はグリッドに写真をアップロードするためにファイルリーダーを使用していますが、グリッドの次の行にアップロードするたびに、最初の行のアップロードされたイメージが置き換えられます。私はそれを行方向にアップロードしたい。

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

Answer 1

我々は次のようにグリッド列内のユーザーコントロールを利用することができます：

コードをユーザーコントロールから.ascxファイル

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

ファイルReaのプレビューコードを追加しますタグにこの.ascxページのder。一度あなたがグリッド列&を追加したい場所を簡単にグリッド列の項目テンプレートにファイルアップロードのユーザーコントロールを追加するには、親ページにユーザーコントロールのページの参照を追加して行わ

<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> 

これにより、ファイルアップロードのユーザーコントロールが異なるグリッドの各行に写真をアップロードできます。