FileUploadコントロールの編集を管理する

Question

私は製品ページを持っています。私は自分の製品を自分のデータベースに追加したいと思っています。 画像に問題があります。 私は、製品のeverithingを挿入すると、私はこのコードを持っている私のaspxページでは... okです：

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

と私はこのコードを持っているの背後にあるコードでは、私の製品を保存：

今

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

を問題は、保存した商品を編集できることです。製品の編集ボタンをクリックすると、すべてのデータを読み込んでユーザーが変更できるようにする必要があります。また、画像。

主な質問は次のとおりです。保存された画像をasp：FileUploadコントロールに読み込むにはどうすればよいですか？

私がやりたいことは、イメージのプレビューを挿入と編集で表示することです。それはAllowMultipleで一つだけのFileUploadで可能だ場合、私は何をしたいの

アンの例では、Amazonが

をした事ですが、=真の私はjavascriptのような他の技術を使用して喜んで

、jQueryとAjaxのそれは

Answer 1

を表示する画像のプレビュー必要かどう - 挿入

<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

ここでは、イメージがサーバーに送信された後にイメージを処理する方法の非常に基本的な例を示します。このスニペットでは、画像のファイル名は固定されていますが、正しい方向に押し込むだけで十分です。ディスク

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

からGridViewコントロールに画像を表示するための

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

今、あなたが示す画像を、あなたには、いくつかは、交換する必要があり、または画像について機能を削除したいしています。 GridView for the imageのフィールドをTemplate Fieldに変換する必要があります。これを行うには、ASPXページのソースビューをクリックし、ImageFieldまたはBoundField（イメージの表示に使用したフィールド）を置き換えます。

が質問にGridViewコントロールのデザインを参照してください。

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

イメージソースをバインドする方法は、その問題の答えです。

削除または置換機能を使用するには、TemplateField内に画像を表示するタグの下にLinkBut​​tonコントロールを含めることができます。

LinkBut​​tonのCommandNameプロパティを.vbまたは.csファイルで 'Delete'または 'Replace'に設定し、GridViewの 'RowCommand'イベントを見つけることができます。

それはあなたがするFileUploadコントロールにイメージをロードしません（のみ擬似コード）

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 

GridViewのRowCommandイベントの詳細情報

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