Zarządzaj zmianami w sterowaniu FileUpload

Question

Mam stronę produktu. Chcę dodać mój produkt do mojej bazy danych i chcę również zaktualizować mój produkt. Mam problem ze zdjęciami. Po włożeniu Everithing produkt jest ok .. W mojej strony aspx mam ten kod:

<span> 
    <asp:FileUpload ID="files" runat="server" AllowMultiple="true" /> 
</span> 
<div runat="server" id="previewImages"></div> 

i kiedy zapisać mój produkt, w kodzie tyłu mam ten kod:

string filenm = string.Empty; 
HttpFileCollection fileCollection = Request.Files; 
for (int i = 0; i < fileCollection.Count; i++) 
{ 
    HttpPostedFile uploadfile = fileCollection[i]; 
    if (uploadfile.ContentLength > 0) 
    { 
     string filename = uploadfile.FileName; 
     System.IO.Directory.CreateDirectory(Server.MapPath("immScarpe/" + txtStyle.Text)); 
     file.SaveAs(Server.MapPath("immScarpe/" + txtStyle.Text + "/") + fileName); 
     //this is pseudo-code 
     INSERT INTO PRODUCT_IMM (IdProduct, Path) VALUES (Id, "immScarpe/" + txtStyle.Text + "/" + fileName) 
    } 
} 

teraz , problem polega na tym, że mogę EDYTOWAĆ zapisany produkt. Kiedy klikam przycisk edycji produktu, muszę załadować wszystkie jego dane i pozwolić użytkownikowi je zmodyfikować. Również obrazy.

główne pytanie brzmi: Jak mogę załadować zapisane obrazy w asp: Kontrola FileUpload?

Inną rzeczą, którą chciałbym zrobić, to pokazać podgląd obrazów ... we wstawce i w edycji.

przykładem tego, co chcę zrobić jest rzeczą, że Amazon ma

, ale jeśli jest to możliwe tylko z jednym FileUpload z AllowMultiple = true

Jestem skłonny do korzystania z innych technologii, takich jak javascript jQuery i Ajax jeśli to konieczne

Answer 1

Pokaż obrazy Preview - Włóż

<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function ShowpImagePreview(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        $('#previewImage').attr('src', e.target.result); 
       } 
       reader.readAsDataURL(input.files[0]); 
      } 
     } 
    </script> 

    <asp:Image ID="previewImage" runat="server" /> 

    <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" /> 

Answer 2

Oto bardzo prosty przykład, w jaki sposób można obsługiwać obrazy po ich wysłaniu na serwer. W tym fragmencie nazwa pliku obrazu jest poprawiona, ale powinna wystarczyć, aby dać ci impuls we właściwym kierunku.

protected void Page_Load(object sender, EventArgs e) 
{ 
    //check if the file exists and show 
    if (File.Exists(Server.MapPath("testImage.jpg"))) 
    { 
     setImage("/testImage.jpg"); 
    } 
} 

//upload a new image 
protected void Button1_Click(object sender, EventArgs e) 
{ 
    if (FileUpload1.HasFile) 
    { 
     try 
     { 
      FileUpload1.SaveAs(Server.MapPath("testImage.jpg")); 
      setImage("/testImage.jpg"); 
     } 
     catch 
     { 
      //error writing file 
     } 
    } 
} 

//delete the image 
protected void LinkButton1_Click(object sender, EventArgs e) 
{ 
    try 
    { 
     File.Delete(Server.MapPath("testImage.jpg")); 
     LinkButton1.Visible = false; 
     Image1.Visible = false; 
    } 
    catch 
    { 
     //error deleteing file 
    } 
} 

//set the image and show the delete link 
private void setImage(string image) 
{ 
    Image1.ImageUrl = "/testImage.jpg"; 
    Image1.Visible = true; 
    LinkButton1.Visible = true; 
} 

ASPX

<asp:Image ID="Image1" runat="server" Visible="false" /> 
<br /> 
<asp:LinkButton ID="LinkButton1" runat="server" Visible="false" OnClick="LinkButton1_Click">Delete image</asp:LinkButton> 
<br /> 
<br /> 
<asp:FileUpload ID="FileUpload1" runat="server" /> 
<br /> 
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /> 

Answer 3

do wyświetlania obrazów na GridView z dysku

https://www.aspsnippets.com/Articles/Display-Images-in-GridView-Control-using-the-path-stored-in-SQL-Server-database.aspx

Teraz masz zdjęcia pokazane, chcesz mieć jakiś zastąpić lub usunąć funkcjonalność na zdjęcia . Konwertuj swoje pole na GridView dla obrazu do pola szablonu. Możesz to zrobić, klikając widok źródłowy strony ASPX i zastępując ImageField lub BoundField (niezależnie od tego, które pole zostało użyte przy wyświetlaniu obrazu).

Zobacz projekt GridView na pytanie:

How to display image inside gridview template field without using handler class?

Sposób wiązania źródło obrazu jest w odpowiedzi na to pytanie.

Aby usunąć lub zamienić funkcjonalność, można umieścić kontrolkę LinkButton w polu Szablon poniżej znacznika, który wyświetla obraz.

Możesz ustawić właściwość CommandName LinkButton na "Usuń" lub "Zamień", a następnie w pliku .vb lub .cs znajdź wydarzenie "RowCommand" dla swojego GridView.

To idzie mniej więcej tak (tylko pseudo kod)

Protected Sub GridView_RowCommand(ByVal sender As Object, ByVal e As System.GridViewCommandEventArgs) Handles GridView.RowCommand 
    If e.CommandName = 'Delete' Then 
     'Place your delete query for your image record on the database here.. 
     'Place your delete file from disk code here.. 
    End If 
End Sub 

Więcej informacji na temat GridView RowCommand Event

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowcommand(v=vs.110).aspx