Upload Image ke SQL Server Database

Catatan ini diinspirasi pertanyaan pembaca di artikel sebelumnya. Di sana ditanyakan bagaimana upload file ke database menggunakan ASP.net kontrol FileUpload. Umumnya file yang diupload akan disimpan di folder tertentu, tapi bagaimana jika file disimpan ke dalam database?.  Setelah membaca berbagai literatur di internet dan mencobanya, akhirnya terbentuk tulisan ini. Saya menggunakan SQL Server 2005 dan ada tipe data image, karena itu saya memfokuskan hanya untuk file image.

Pertama, buat tabel di database untuk menyimpan file gambar.

Buat webpage dan tambahkan FileUpload tool dan sebuah button

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>Upload Image ke SQL Server Database</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Image Path: &nbsp;
        <asp:FileUpload ID="FileUpload1" runat="server" /><br />
        <asp:Button ID="Button1" runat="server" Text="Upload" />
        <br />
    </div>
    </form>
</body>
</html>

Di code behind tambahkan kode berikut

Imports System.Data
Imports System.Data.SqlClient

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        If (Not FileUpload1.PostedFile Is Nothing) AndAlso (FileUpload1.PostedFile.FileName <> "") Then
            Dim buffer(FileUpload1.PostedFile.ContentLength) As Byte
            Dim postFile As HttpPostedFile = FileUpload1.PostedFile
            postFile.InputStream.Read(buffer, 0, CInt(FileUpload1.PostedFile.ContentLength))

            Dim sqlCon As New SqlConnection(ConfigurationManager.ConnectionStrings("DemoUploadImgConn").ToString())
            Dim sqlCommand As New SqlCommand()
            sqlCommand.CommandText = "INSERT INTO Images(Name,Gambar,Size,Type)" & _
                              " VALUES (@Image_Name,@Image_Content,@Image_Size,@Image_Type)"
            sqlCommand.CommandType = CommandType.Text
            sqlCommand.Connection = sqlCon

            Dim Image_name As New SqlParameter("@Image_Name", SqlDbType.NVarChar, 200)
            Image_name.Value = FileUpload1.PostedFile.FileName
            sqlCommand.Parameters.Add(Image_name)

            Dim gambar As New SqlParameter("@Image_Content", SqlDbType.Image, buffer.Length)
            gambar.Value = buffer
            sqlCommand.Parameters.Add(gambar)

            Dim image_size As New SqlParameter("@Image_Size", SqlDbType.BigInt, 99999)
            image_size.Value = FileUpload1.PostedFile.ContentLength
            sqlCommand.Parameters.Add(image_size)

            Dim image_Type As New SqlParameter("@Image_Type", SqlDbType.NVarChar, 200)
            image_Type.Value = FileUpload1.PostedFile.ContentType
            sqlCommand.Parameters.Add(image_Type)

            sqlCon.Open()
            sqlCommand.ExecuteNonQuery()
            sqlCon.Close()
        End If
    End Sub
End Class

Jalankan aplikasinya, dan periksa apakah image berhasil di upload ke database.

Semoga membantu. Happy Coding

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 7 Januari 2010, in ASP.net and tagged , , , , . Bookmark the permalink. 16 Komentar.

  1. mas, mau tanya. saya newbi di dunia ASP.net ini
    Kalo data image yang di taro di sql server apa tidak memberatkan pada saat pembacaan dan pemanggilan datanya…?
    Apakah tidak ada pembengkakan memory di sql servernya…?

    terimakasih

    • Kalo menyimpan gambar di database, yang jadi masalah utama adalah ukuran databasenya. Ukuran databasenya memang harus di perbesar melebihi “normal”.
      Tapi dari segi kemudahan, data lebih mudah di manage dan lebih mudah di backup. Menghapus data-data gambar secara manual di server lebih merepotkan, apalagi kalo udah menyangkut masalah security. Kalo didatabase, menghapus gambar sesuai informasi/kategory tertentu tinggal pake query aja.

  2. 1. Apakah tidak ada kendal nantinya ketika data gambar yang ada di database sql server tersebut di panggil untuk di tanpilkan di gridview…?
    2. bagaimana dengan tingkat kecepaan pembacaan datanya., apakah lebih lama or lebih cepat untuk di tampilkan…?

    Terimakasih… (>_<)

    • 1. Menurut saya, tidak ada masalah ketika gambar di tampilkan bersama2 dalam gridview. Saya pernah membuat contohnya disini

      2. Kalo database nya jadi satu dengan aplikasinya (satu tempat) gak terasa perbedaaannya.

      • 1.Maaf kk mau tanya lagi. Maksudnya letak databasenya satu folder dengan aplikasinya bukan yang di taruh langsung di sqlservernya…?
        Bisa kasih tau ga connectionstringnya yang di webconfignya kk..
        maaf kk banyak tanya nech coz saya baru mencoba asp.net -+ 2 mingguan ini..
        mohon bantuannya… (^_^)

      • maksudnya satu tempat itu, di satu server/pc. Jadi disatu pc/server itu, aplikasi dan sql servernya di install di satu tempat (pc).
        Sering ada kasus, dimana server yang digunakan untuk database dan aplikasi berbeda (jadi ada 2 server/pc yang terpisah).

        koneksi string di web config

        <connectionStrings>
        		<add name="DemoUploadImgConn" connectionString="Data Source=ANDIYUNIAR;Initial Catalog=DemoUploadImg;Integrated Security=True" providerName="System.Data.SqlClient"/>
        	</connectionStrings>

        kalo bingung, tambahkan saja tool “SqlDataSource” ke file aspx. Trus klik panah kecil pilih “Configure Data Source”. Muncul window configuration wizard, ikuti aja wizard ini, ntar ada window yang memberitahu, apakah configurasi di simpan di web-config. Ntar otomatis di web config terbentuk setting koneksi stringya. Kalo udah, tinggal dihapus aja tool “SqlDataSource” nya.

        silahkan dicoba. kalo bingung silahkan tanya lagi

      • Tidak pak, saya kira settingan untuk connectionstringnya beda..
        Terimakasih atas petunjuknya..
        Saya mau tanya lagi pak..
        Sebelumnya saya untuk koneksi itu memakai hardcode (code behind (VB)) dengan connectionstring tentunya sama dengan codingan bapak di atas.
        kalo memakai sqldatasource. apa kelebihan dan kekurangannya jika memakai sqldatasource…?
        terimakasih

      • @zaid
        Saya memakai “sqldatasource” hanya untuk membuat koneksi string di web.config. Karena saya gak apal parameter2 koneksinya. Setelah selesai biasanya sqldatasource nya saya hapus.
        Untuk aplikasi saya gak pernah pake sqldatasource, karena sifatnya yang “lokal” (“hanya untuk satu page”). Bayangkan jika zaid membuat 10 page dan masing2 ada koneksi ke db pake sqldatasource. Terus karena suatu sebab, koneksi databasenya di ganti. Maka jelas, zaid harus meng edit, ke 10 page yang ada koneksi db nya. Itu bisa merepotkan.
        Karena alasan inilah, saya gak pernah pake sqldatasource. Saya lebih suka koneksi ke db nya didefinisikan di class, page yg butuh koneksi tinggal akses class ini. Dan kalo ada perubahan di db yang diedit cuman 1 class ini aja.

        Untuk koneksi stringnya di taruh di web.config, tujuannya ketika aplikasi di publish ke server (dan udah di compile), kalo ada modifikasi koneksi db nya tinggal rubah file web.confignya. Kalo koneksi string di taruh di class, bisa repot kalo aplikasi udah di publish, kita gak bisa modifikasi file yang udah jadi dll.

        kira2 begitu jawabnya…😀

  3. Salam..

    berdsarkan artikel bapak yg uplod dan menampilkan gambar. saya mau tnya pak, klo misal sya buat 10 halaman yg berbeda dengan tiap halaman mempunyai fasiltas upload.
    yang jadi pertanyaan saya, klo tiap halaman ketika upload lngsung menampilkan file gambar yg kita upload baik berupa gambar atau link yang mengarah ke gambar itu bagaimana ya mas ?

    Terima kasih sebelumnya.

    • Cara mudahnya sih, harus ada proses postback untuk ambil data gambar atau link dari server. FileUpload kan melakukan proses postback, tinggal tambahin aja kode untuk menampilkan gambarnya ke image control setelah proses upload selesai.

      Kira-kira begitu

      • wah… sya masih awam ni.. kira2 ada contoh untuk proses postbacknya tu seperti apa ya ? atau kira2 ada referensi yg bisa membantu saya.. trima kasih

      • Di contoh saya, proses postbacknya dilakukan oleh ‘Button1’. Tombol ini yang melakukan proses postback

  4. mas yuniar, mau tanya. saya sudah mencoba coding mas, tetapi kok bad request ya?

  5. mau tanya dong, kalo didatabase nya memang sudah ada gambarnya di masukin tapi pas dipanggil diwebsite malah berantakan ??
    moohon bantuannya

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: