I have a product page. I want to add my product to my database and I want also to update my product. I have a problem with images. When I insert the product everithing is ok.. In my aspx page I have this code:
<span> <asp:FileUpload ID="files" runat="server" AllowMultiple="true" /> </span> <div runat="server" id="previewImages"></div> and when I save my product, in code behind I have this code:
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) } } Now, the problem is that I can EDIT the saved product. When I click the edit button for a product, I have to load all it's data and let the user modify them. Also the images.
the main question is: How can I load the saved images in asp:FileUpload control?
Another thing I would like to do is to show images previews...in insert and in edit.
An Example of what I want to do is the thing that amazon does 
but, if it's possible with only one FileUpload with AllowMultiple = true
I am willing to use other technologies like javascript, jquery and Ajax if it's necessary
2 Answers
Answers 1
Show Images Preview - Insert
<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);" /> Answers 2
Here is a very basic example as to how you can handle images after they have been send to the server. In this snippet the filename of the image is fixed, but it should be enough to give you push in the right direction.
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" /> 
0 comments:
Post a Comment