ライブ画像のプレビュー表示fileuploadから画像を選択し、画像を保存せずにgridviewで画像を表示するasp.net

Question

fileuploadから選択した画像を保存することなく、gridviewで画像のライブプレビューを表示したい。 1つずつ画像を選択する）。 私はこれをしました。

public class Productimage 
{ 
    public System.IO.Stream ProductImageStream { get; set; } 
    public System.Drawing.Image ProductImage { get; set; } 
    // Productimage productImage = new Productimage(); 
    public static List<Productimage> ImageList = new List<Productimage>(); 
} 

if (IsPostBack) 
{ 
    if (fileUploadProductImage.HasFile) 
    { 
     // Productimage.ImageList.Clear(); 
     Productimage productImage = new Productimage(); 
     productImage.ProductImageStream = fileUploadProductImage.PostedFile.InputStream; 
     productImage.ProductImage = System.Drawing.Image.FromStream(fileUploadProductImage.PostedFile.InputStream) as System.Drawing.Image; 
     Productimage.ImageList.Add(productImage); 
     gridViewProductImage.DataSource = Productimage.ImageList; 
     gridViewProductImage.DataBind(); 
     SaveProductImage(); 
    } 
} 

が、私はそれをやったときに、それは私のGridViewの列

私のaspxページは

<asp:FileUpload ID="fileUploadProductImage" runat="server" onchange="this.form.submit();" /> 

<asp:GridView ID="gridViewProductImage" runat="server" CssClass="table table-hover table-striped table-responsive"> 
    <Columns> 
     <asp:TemplateField HeaderText="Images"> 
      <ItemTemplate> 
       <asp:Image ID="imageOfProduct" runat="server" ImageUrl='<%#Eval("ProductImage")%>' /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Action"> 
      <ItemTemplate> 
       <asp:LinkButton ID="linkDelete1" runat="server" CssClass="btn btn-xs btn-lightred" OnClientClick="return false;"><i class="fa fa-times"></i> Delete</asp:LinkButton> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

、誰もが私が間違っているの何かを提案することができます生成することができないという例外を与えます。前もって感謝します。

Answer 1

これはjQueryで簡単に行うことができ、PostBackを必要としません。

<asp:FileUpload ID="FileUpload1" runat="server" accept=".bmp,.gif,.jpg,.jpeg,.png" capture="camera" /> 

<img id="imagePreviewPlaceHolder" style="max-width: 250px; max-height: 150px;" /> 

<script type="text/javascript"> 
    $("#<%=FileUpload1.ClientID %>").change(function() { 
     imagePreview(this); 
    }); 

    function imagePreview(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#imagePreviewPlaceHolder').attr('src', e.target.result); 
       $("#imagePreviewPlaceHolder").show(); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>