How upadate or uploading image in asp.net c#?

Question

0.00/5 (No votes)

See more:

C#

ASP.NET

hello,
I want to update or upload image like changing profile picture of facebook.. how can i do..?
thank u..

Posted 22-Jan-14 4:25am

Member 9877729

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 27-Jan-14 12:02pm

Where is the problem exactly?

2 solutions

Solution 1

The ASP File Upload control is your friend ;)

<asp:FileUpload ID="fuImage" runat="server" />

Posted 22-Jan-14 4:54am

Ahmed Bensaid

Comments

Member 9877729 23-Jan-14 0:59am

but i want it like when mouse is over on an image then a link appear on image for uploading image like changing profile picture in facebook...how can i do like this..????

Ahmed Bensaid 23-Jan-14 3:43am

What did you try ?

Member 9877729 26-Jan-14 0:23am

i am trying to get a link label or button on the bottom of the image when a mouse moves over it...and that label or button that performs uploading image...as like facebook edit profile picture....

Ahmed Bensaid 26-Jan-14 9:33am

Can we see your code ?

Member 9877729 26-Jan-14 23:38pm

here is my code...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
#profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
#profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
#profile_pic_wrapper:hover a{ display:block; }
#profile_pic_wrapper:hover a:hover{text-decoration:none;}
.profile_pic{ width:200px; height:200px;}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">

function Func() {
document.getElementById("test").click();
document.getElementById("imgProfilePic");
}

</script>

<form id="form1" runat="server">
<div>
<div id="profile_pic_wrapper">
<asp:Image ID="imgProfilePic" runat="server" ImageUrl="~/cute_girl_001facebook_timeline_cover.jpg" CssClass="profile_pic"/>

Change picture
<input type="file" id="test" style="visibility:hidden" runat="server" accept="image/*"/>
</div>
</div>
</form>
</body>
</html>

so i want it like,when user click on link "change picture" then new selected picture is set to the image control..but without using upload button...how can i do it?

Member 9877729 26-Jan-14 23:46pm

but i use a tag instead of HyperLink....

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)

Ahmed Bensaid · Accepted Answer · 2014-01-27T04:08:00

I made a mix between your code and code of this thread ;)

Markup :

ASP

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="MyTestProject.Default2" %>

<!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></title>
    <style type="text/css">
        #profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
        #profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
        #profile_pic_wrapper:hover a{ display:block; }
        #profile_pic_wrapper:hover a:hover{text-decoration:none;}
        .profile_pic{ width:200px; height:200px;}
    </style>
    <script type="text/javascript" language="javascript">
        function Func() {
            document.getElementById("filUpload").click();
            document.getElementById("imgProfilePic");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <div id="profile_pic_wrapper">
            <asp:Image ID="imgProfilePic" runat="server" ImageUrl="~/cute_girl_001facebook_timeline_cover.jpg" CssClass="profile_pic"/>
            <!--<asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="~/Default3.aspx">Change Picture</asp:HyperLink>-->
            <label onclick="Func()">Change picture</label>
            <asp:Button runat="server" ID="btnUpload" />
            <input type="file" id="filUpload" style="visibility:hidden" runat="server" accept="image/*"/>
            <asp:Label runat="server" ID="lblOutput"></asp:Label>
        </div>

    </div>
    </form>
</body>
</html>

Code behind :

VB

Imports System.Drawing

Partial Public Class Default2
    Inherits System.Web.UI.Page

    ''' <summary>
    '''
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    ''' <summary>
    '''
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click

        'Initialize variables
        Dim sSavePath As String
        Dim sThumbExtension As String
        Dim intThumbWidth As Integer
        Dim intThumbHeight As Integer

        'Set constant values
        sSavePath = "images/"
        sThumbExtension = "_thumb"
        intThumbWidth = 160
        intThumbHeight = 120

        'If file field isn’t empty
        If filUpload.PostedFile IsNot Nothing Then

            'Check file size (mustn’t be 0)
            Dim myFile As HttpPostedFile = filUpload.PostedFile
            Dim nFileLen As Integer = myFile.ContentLength
            If (nFileLen = 0) Then
                lblOutput.Text = "No file was uploaded."
                Return
            End If

            'Check file extension (must be JPG)
            If Not System.IO.Path.GetExtension(myFile.FileName).ToLower() = ".jpg" Then
                lblOutput.Text = "The file must have an extension of JPG"
                Return
            End If

            'Read file into a data stream
            Dim myData(nFileLen) As Byte
            myFile.InputStream.Read(myData, 0, nFileLen)

            'Make sure a duplicate file doesn’t exist.  If it does, keep on appending an
            'incremental numeric until it is unique
            Dim sFilename As String = System.IO.Path.GetFileName(myFile.FileName)
            Dim file_append As Integer = 0
            While (System.IO.File.Exists(Server.MapPath(sSavePath + sFilename)))
                file_append += 1
                sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) _
                                 + file_append.ToString() + ".jpg"
            End While

            'Save the stream to disk
            Dim newFile As System.IO.FileStream = New System.IO.FileStream(Server.MapPath(sSavePath + sFilename), System.IO.FileMode.Create)
            newFile.Write(myData, 0, myData.Length)
            newFile.Close()

            'Check whether the file is really a JPEG by opening it
            Dim myCallBack As Image.GetThumbnailImageAbort = New System.Drawing.Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback)
            Dim myBitmap As Bitmap
            Try
                myBitmap = New Bitmap(Server.MapPath(sSavePath + sFilename))
                'If jpg file is a jpeg, create a thumbnail filename that is unique.
                file_append = 0
                Dim sThumbFile As String = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) _
                                           + sThumbExtension + ".jpg"
                While (System.IO.File.Exists(Server.MapPath(sSavePath + sThumbFile)))
                    file_append += 1
                    sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) _
                                + file_append.ToString() + sThumbExtension + ".jpg"
                End While

                'Save thumbnail and output it onto the webpage
                Dim myThumbnail As Image = myBitmap.GetThumbnailImage(intThumbWidth, intThumbHeight, myCallBack, IntPtr.Zero)
                myThumbnail.Save(Server.MapPath(sSavePath + sThumbFile))
                imgProfilePic.ImageUrl = sSavePath + sThumbFile

                'Displaying success information
                lblOutput.Text = "File uploaded successfully!"

                'Destroy objects
                myThumbnail.Dispose()
                myBitmap.Dispose()
            Catch errArgument As ArgumentException
                'The file wasn't a valid jpg file
                lblOutput.Text = "The file wasn't a valid jpg file."
                System.IO.File.Delete(Server.MapPath(sSavePath + sFilename))
            End Try
        End If

    End Sub

    Public Function ThumbnailCallback() As Boolean
        Return False
    End Function

End Class