Image preview before uploading

Question

0.00/5 (No votes)

See more:

Hai,

I am developing a project in which user can preview the image before uploading to the database and delete the same before uploading to the db. I have written javascript code for that. My problem is, if i write the same code in new page without master page its working fine,bt not within the master page. What i have to do? Even i tried the following link but i didnt got. please help me.

XML

http://www.dotnetspider.com/resources/40858-Preview-Image-before-uploading-using.aspx


if i write the below code in side my master page its not working.
MY aspx page


<pre><%@ Page Language="C#" AutoEventWireup="true" CodeFile="image3.aspx.cs" Inherits="image3" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    
    <script type="text/javascript">
function uploadStarted() {
    $get("imgDisplay").style.display = "none";
}
function uploadComplete(sender, args) {
    var imgDisplay = $get("imgDisplay");
    imgDisplay.src = "images/loading.jpg";
    imgDisplay.style.cssText = "";
    var img = new Image();
    img.onload = function () {
        imgDisplay.style.cssText = "height:100px;width:100px";
        imgDisplay.src = img.src;
    };
    img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
}
function clearcontents() {
    var AsyncFileUpload = $get("<%=AsyncFileUpload1.ClientID%>");
    var txts = AsyncFileUpload.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        if (txts[i].type == "text") {
            txts[i].value = "";
            txts[i].style.backgroundColor = "white";
        }
    }
    
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />
<asp:Image ID="imgLoader" runat="server" ImageUrl="images/loading.jpg" /><br /><br />
<img id = "imgDisplay" alt="" src="" style = "display:none"/>
<br />
<br />
<asp:LinkButton ID="previewdel" runat="server" Text="Delete" onclick="previewdel_Click"/>
    </div>
    </form>
</body>
</html>

my cs page.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class image3 : System.Web.UI.Page
{
    protected string UploadFolderPath = "~/Uploads/";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void FileUploadComplete(object sender, EventArgs e)
    {
        string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
        AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
    }



    protected void previewdel_Click(object sender, EventArgs e)
    {
        clearcontents(sender as Control);
    }
    private void clearcontents(Control control)
    {
        for (var i = 0; i < Session.Keys.Count; i++)
        {
            if (Session.Keys[i].Contains(control.ClientID))
            {
                Session.Remove(Session.Keys[i]);
                break;
            }
        }
    }
  
}

Posted 16-Aug-12 16:15pm

shabadiveda

Add a Solution

Comments

Kenneth Haugland 16-Aug-12 22:48pm

Perhaps you should upload the file to an Isolated Storage or something like that?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Santhosh Kumar Jayaraman · Answer 1 · 2012-08-16T17:59:00

Solution 1

Check my article.
Previewing Image in ASP.NET Image Control using C#[^]

If you want Async without button click, check this

http://rockingshani.blogspot.in/search/label/Asp.net%20File%20Upload[^]

Posted 16-Aug-12 17:59pm

Santhosh Kumar Jayaraman

Updated 16-Aug-12 19:55pm

v2

Comments

shabadiveda 17-Aug-12 1:53am

thanks for the reply, bt i dont want to c the preview wen the user clicks a button. any other way?
i took out all the javascript and only with Asyncfileupload i tried, if i put Asyncfileupload my form is not visible with the master page. please help me asap

Santhosh Kumar Jayaraman 17-Aug-12 1:54am

Check this.
http://rockingshani.blogspot.in/search/label/Asp.net%20File%20Upload

shabadiveda 17-Aug-12 4:16am

thnx for the replay, i want to show 8 image's preview on different fileupload control. if i use fileupload control it wil refresh the page,i cant place fileupload in updatepanel since its not supportive for fileupload n if i use asynfileupload its not working....it becoming a big headache for me..any suggestions.