顯示實時圖像預覽從fileupload中選擇圖片並在gridview中顯示圖片而不保存圖像asp.net

Question

我想在gridview上顯示圖像實時預覽而不保存圖像，可以選擇從fileupload中選擇多個圖像（這意味着圖像可以逐一選擇圖像）。 我已經這樣做了。

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來完成，簡單，並且不需要回發。

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