Question Retrieving and displaying images on a website

Si24

New member
Joined
Feb 1, 2013
Messages
1
Programming Experience
Beginner
I'v been having a bit of issues being able to retrieve my images that have been saved to a mysql database.
I have managed to save them but I need to know how to display them as soon as it was saved to the database so that the user knows when it was saved.

Here is my code so far :
This is for the button that user click to upload there image :


I had to put the code on a seperate aspx page because i was having issues with my popup window but had fixed that issue.

<!DOCTYPE html>

<html>
<head runat="server">
<title>Upload Photo</title>
<link rel="Stylesheet" type="text/css" href="~/codebase/dhtmlx.css" />
<link rel="Stylesheet" type="text/css" href="~/codebase/dhtmlxaccordion_dhx_skyblue.css" />
<link rel="Stylesheet" type="text/css" href="~/codebase/dhtmlx_custom.css" />
<link rel="stylesheet" type="text/css" href="~/JavaScript/OpenLayers212/theme/default/style.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/JavaScript/jquery/jquery-1.9.0.min.js" />
<asp:ScriptReference Path="~/JavaScript/Forms.js" />
<asp:ScriptReference Path="~/codebase/dhtmlx.js" />
<asp:ScriptReference Path="~/codebase/dhtmlxaccordion.js" />
<asp:ScriptReference Path="~/JavaScript/OpenLayers212/OpenLayers.js" />
<asp:ScriptReference Path="~/JavaScript/Region.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>

<div>
<asp:FileUpload ID="Uploader" runat="server"/>
<asp:button ID="btnUpload" type="submit" class="upload" runat="server" Text="Upload"/>
<td colspan="3" style="text-align: center; padding-top: 1.5em;"><input type="button" class="button" value="Close" onclick="parent.closeimgUpload();" /></td>


</div>
this was to only test to see if i was getting any images back but I can not use this in the end


<%-- <asp:Image ID="imgView" runat="server" Height="480px" Width="640px" />--%>
</form>
</body>
</html>

Shows the image and then the thumbnail


function datasaved(result) {
$get("hfAgentThumb").value = 1;
clientSize();
ShowAgentImage();
}
this is part of the popup display window that is to show the image from the database once it has been saved.
function ShowAgentImg() {

dhxWins.vp.style.display = '';
if (imgAgeWindow == undef) {
imgAgeWindow = dhxWins.createWindow("imgAgeWindow ", 0, 0, 640, 480);
imgAgeWindow .setText("Agent Photo");
imgAgeWindow .button("park").hide();
imgAgeWindow .button("minmax1").hide();
imgAgeWindow .button("close").attachEvent("onclick", function () { closeImage() });
imgAgeWindow .denyResize();
}

imgAgeWindow .attachURL("/Mapping/ImgAge.aspx");
imgAgeWindow .show();
imgAgeWindow .setModal(true);
winSizeAndCenter(imgAgeWindow , 670, 540, 0);
}

This is the part of the background code that saves it to the database.

Protected Sub btnUpload_Click(sender As Object, e As System.EventArgs) Handles btnUpload.Click
Dim ConnectionString As String = ConfigurationManager.ConnectionStrings("Connection").ConnectionString
Dim Connection As MySqlConnection = New MySqlConnection(ConnectionString)
Dim Command As MySqlCommand = New MySqlCommand()


If Uploader.PostedFile IsNot Nothing AndAlso Uploader.PostedFile.FileName <> "" Then
Dim strExtension As String = System.IO.Path.GetExtension(Uploader.FileName).ToLower
Dim okExt As String() = {".gif", ".jpg", ".jpeg", ".png"}
Dim ImgID As UInteger
Dim imgA As System.Drawing.Image = System.Drawing.Image.FromStream(Uploader.PostedFile.InputStream)
Dim tn As System.Drawing.Image = CMA.ResizeImage(imgA, New Size(94, 75))
Dim filedata As Byte() = Nothing
Dim tnMemoryStream As MemoryStream = New MemoryStream()
tn.Save(tnMemoryStream, System.Drawing.Imaging.ImageFormat.Jpeg)
filedata = tnMemoryStream.GetBuffer()
If (Array.IndexOf(okExt, strExtension) > -1) Then

' Resize Image Before Uploading to DataBase
Dim imageToBeResized As System.Drawing.Image = System.Drawing.Image.FromStream(Uploader.PostedFile.InputStream)
Dim imageHeight As Integer = imageToBeResized.Height
Dim imageWidth As Integer = imageToBeResized.Width
Dim maxHeight As Integer = 480
Dim maxWidth As Integer = 640
imageHeight = (imageHeight * maxWidth) / imageWidth
imageWidth = maxWidth
If imageHeight > maxHeight Then
imageWidth = (imageWidth * maxHeight) / imageHeight
imageHeight = maxHeight
End If
Dim bitmap As New Bitmap(imageToBeResized, imageWidth, imageHeight)
Dim stream As System.IO.MemoryStream = New MemoryStream()
bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg)
stream.Position = 0
Dim img As Byte() = New Byte(stream.Length) {}
stream.Read(img, 0, img.Length)
If Me.Uploader.HasFile Then
Dim uploadimg As Byte() = Uploader.FileBytes
Try
Command.Connection = Connection
Command.CommandType = CommandType.StoredProcedure
Command.CommandText = "spImgSave"
Command.Parameters.AddWithValue("?_CustomerID", HttpContext.Current.Session("CustomerID"))
Command.Parameters.AddWithValue("?_Region", HttpContext.Current.Session("Region"))
Command.Parameters.AddWithValue("?_imgAge", img)
Command.Parameters.AddWithValue("?_ImgThumb", filedata)
Connection.Open()
ImgID = Command.ExecuteScalar()
Catch ex As Exception
Dim er As String = ex.ToString
Finally
Connection.Close()
End Try
End If
End If
End If
End Sub

Here is the part of the code on a new aspx that is suppose to retrieve the code but somehow the two are not speaking together.

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Response.ContentType = "image/jpeg"
Response.Expires = 0

Dim CustomerID As Integer
Dim Region As String

If Request.QueryString.Count = 4 Then
CustomerID = Request.QueryString("CustomerID")
Region = Request.QueryString("Region")
Else
CustomerID = Session("CustomerID")
Region = Session("Region")
End If


Dim ConnectionString As String = ConfigurationManager.ConnectionStrings("Connection").ConnectionString
Dim Connection As MySqlConnection = New MySqlConnection(ConnectionString)
Dim Command As MySqlCommand = New MySqlCommand()
Dim DataAdapter As MySqlDataAdapter = New MySqlDataAdapter
Command.Connection = Connection
Command.CommandType = CommandType.StoredProcedure
Command.CommandText = "spImgGet"
Command.Parameters.AddWithValue("?_CustomerID", CustomerID)
Command.Parameters.AddWithValue("?_Region", Region)
Command.Parameters.AddWithValue("?_InclBlob", True)
Command.Parameters.AddWithValue("?_ImgID", Request.QueryString("ImgID"))
Dim ImgDataSet As DataSet = New DataSet
DataAdapter.SelectCommand = Command
DataAdapter.Fill(ImgDataSet)
Dim imgBytes As Byte() = ImgDataSet.Tables(0).Rows(0)("imgAge")

Dim ms As MemoryStream
ms = New MemoryStream(imgBytes, 0, imgBytes.Length)
Dim img As Image = Image.FromStream(ms)

Response.ContentType = img.GetType().ToString


End Sub


it suppose to basically read the image information once the user has clicked up load and aswell save it to the database basically at the same time.


I have done another type of one before this but its a complete different type of image one that has to keep the date in it I have tried incorporating that code with this code but then it gives me errors like memory full when it sizes it to a thumnail or it just does not go through the rest of the code as if its missing a little building block connecting the two together but I for the life of me cannot figure it out at the moment.
 
Back
Top