Developing An Image Upload Web Service

來源:互聯網
上載者:User
web
Developing An Image Upload Web Service

By: Bipin Joshi
Level: Intermediate
Posted Date: 5/31/2002
Tested with ASP.NET v1.0 (RTM)
Click for Printable Version
Click here to download sample code


Member Rating: 3.90 (Rated by 10 members)
Rate This Item
ASP.NET Web Services provide 'Web callable' functions based on industry standards like HTTP, XML and SOAP. Since Web Services heavily rely on XML, all the data that is passed to and returned from a Web Service must be plain text. However, in certain applications we do need to pass binary data. Say for example I want to pass images from my Web form to a Web Service to save in some central repository and then retrieve them back. Does this mean that Web Services cannot be used for such data transfer? Certainly not. In fact ASP.NET Web Services make it easy to pass such data by hiding the encoding and decoding involved. Typically when you want to pass binary data you will declare the parameter of the Web method or return value of the Web method as a byte array. ASP.NET Web Services will automatically encode/decode this data using Base64 encoding. (Base64 encoding is the same encoding that is used for email MIME attachments.) In this example we develop an image upload Web Service that stores and retrieves images from SQL Server database.
SQL Server Database Table
To work with example you need a table in SQL server database called IMAGES. The following script can be used to create this table.
CREATE TABLE [dbo].[IMAGES] (
  [id] [int] IDENTITY (1, 1) NOT NULL ,
  [imgdata] [image] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
The table contains two columns - ID that represents the primary key and IMGDATA that stores binary image data. Note that I have created this table in Northwind database itself; you may want to create it in some other database.
Creating the Web Service
Now, let us proceed with creating the Web Service. Create a new Web Service project in VS.NET and add the following two Web methods to it.
<WebMethod()> Public Function SaveImage(ByVal imgdata() As Byte) As String
  Dim connstr As String = "Integrated Security=SSPI;User ID=sa;Initial Catalog=Northwind;Data Source=SERVER\netsdk"
    Dim cnn As New SqlConnection(connstr)
    cnn.Open()
    Dim cmd As New SqlCommand("insert into images values(@img)", cnn)
    cmd.Parameters.Add(New SqlParameter("@img", imgdata))
    cmd.ExecuteNonQuery()
  End Function
  <WebMethod()> Public Function RetrieveImage(ByVal imgid As Integer) As Byte()
    Dim connstr As String = "Integrated Security=SSPI;User ID=sa;Initial Catalog=Northwind;Data Source=SERVER\netsdk"
    Dim cnn As New SqlConnection(connstr)
    Dim cmd As New SqlCommand("select * from images where id=" & imgid, cnn)
    cnn.Open()
    Dim dr As SqlDataReader = cmd.ExecuteReader
    dr.Read()
    Dim bindata() As Byte = dr.GetValue(1)
    Return bindata
  End Function
The method SaveImage accepts a byte array containing image data and saves it to the images table. The second method accepts image id to be retrieved and returns a byte array from the Web method.
Next, we will develop a Web client that presents UI for uploading files and calls this Web Service internally.
Creating the Client for the Web Service
Create a new Web application in VS.NET and add a Web reference to the Web Service we developed in the previous sections. Now, add a new WebForm called WebForm1 to the project. Put a File HTML server control and Button Web control on the form. The form should look like this:




The following is the markup of the WebForm:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="BinaryDataWC.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server" enctype="multipart/form-data">
      <INPUT style="Z-INDEX: 101; LEFT: 164px; POSITION: absolute; TOP: 51px" type="file" id="File1" name="File1" runat="server">
      <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 22px; POSITION: absolute; TOP: 48px" runat="server">Select File to Upload :</asp:Label>
      <asp:Button id="Button1" style="Z-INDEX: 102; LEFT: 180px; POSITION: absolute; TOP: 94px" runat="server" Text="Upload"></asp:Button>
    </form>
  </body>
</HTML>
Note that the form has EncType attribute set to multipart/form-data. This is necessary in order to upload files.
Now, write the following code in the click event of the Upload button:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
  Dim ws As New localhost.Service1()
  Dim s As Stream = File1.PostedFile.InputStream
  Dim data(File1.PostedFile.ContentLength - 1) As Byte
  s.Read(data, 0, File1.PostedFile.ContentLength)
  ws.SaveImage(data)
End Sub
Here, we have created instance of Web Service class (actually proxy class). We fetched the file content into a byte array and then pass this array to the SaveImage Web method.
It's time now to develop another WebForm that will retrieve images from the database.

Add a new WebForm to the project called WebForm2 and put a label, TextBox, button and image Web control on it. The TextBox is used to specify the image id to be retrieved. We will retrieve the image as a byte array, save it in some file and then bind the image Web control to the file. The following is the markup of the WebForm:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.vb" Inherits="BinaryDataWC.WebForm2"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>WebForm2</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
      <asp:Button id="Button1" style="Z-INDEX: 102; LEFT: 271px; POSITION: absolute; TOP: 29px" runat="server" Text="Retrieve"></asp:Button>
      <asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 31px; POSITION: absolute; TOP: 31px" runat="server">Image ID :</asp:Label>
      <asp:TextBox id="TextBox1" style="Z-INDEX: 103; LEFT: 108px; POSITION: absolute; TOP: 30px" runat="server"></asp:TextBox>
      <asp:Image id="Image1" style="Z-INDEX: 101; LEFT: 28px; POSITION: absolute; TOP: 70px" runat="server"></asp:Image>
    </form>
  </body>
</HTML>
Write the following code in the click event of Retrieve button:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
  Dim ws As New localhost.Service1()
  Dim data() As Byte = ws.RetrieveImage(TextBox1.Text)
  Dim s As New FileStream(Server.MapPath(Request.ApplicationPath) & "\sample.jpg", FileMode.Create)
  s.Write(data, 0, data.Length)
  s.Close()
  Image1.ImageUrl = Server.MapPath(Request.ApplicationPath) & "\sample.jpg"
End Sub
Here, we have created a disk file to hold the retrieved bytes. The following screen shows a sample run of the WebForm.


Summary
In this article we saw how to develop an image upload Web Service. Web Services are based on standards like XML and SOAP that are 'Text Only'. However, ASP.NET Web Services make it easy to pass binary data to and from the Web Service by automatically encoding the data using Base64 encoding.
 

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。