Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Ajax Upload dengan Hidden IFrame

Salah satu permasalahan pada ASP.NET AJAX Update Panel adalah tidak dapat melakukan asynchronous communication pada proses upload file. Hal ini disebabkan karena pada dasarnya object XMLHttpRequest (XHR) tidak dapat mengirimkan sebuah file dengan alasan keamanan. Pada beberapa situs seperti Google Mail dan Community Server tetap dapat melakukan upload file tanpa me-refresh seluruh halaman.

Solusi Alternatif

Saah satu alternatif cara untuk melakukan upload tanpa harus me-refresh seluruh halaman adalah menggunakan IFrame yang tersembunyi (hidden IFrame). Pada halaman utama disisipkan sebuah iframe yang berisi sebuah halaman kosong dan pada form target halamannya diarahkan ke halaman kosong yang ada di dalam iframe tersebut. Dengan cara ini hanya bagian IFrame saya yang akan melakukan komunikasi dengan server tanpa mempengaruhi keseluruhan halaman.

Langkah langkah trik ini adalah sebagai berikut.

  1. Tambahkan hidden IFrame pada halaman dan set sembunyikan dengan style="display:none".


    <iframe name="hiddenFrame" src="blank.htm" mce_src="blank.htm" style="display:none"></iframe>

  2. Buat file blank.htm pada sollution.
    File ini dibutuhkan untuk memastikan bahwa IFrame masih dalam lingkup domain yang sama dengan halaman utama. Jika file blank.htm berada di luar domain (misal default blank.htm yang ada di komputer lokal) maka akan ada penolakan hak akses terhadap eksekusi script di luar domain.
  3. Tambahkan kontrol FileUpload ke dalam form

    <asp:FileUpload ID="fileUpload1" runat="server" />
  4. Buat fungsi submitForm yang berfungsi melakukan submit terhadap hidden IFrame.

    // Fungsi memiliki dua parameter yang berisi referensi element IFrame
    // dan element ID control FileUpload
    function submitForm(frameName,upload){
         // Diasumsikan bahwa halaman utama adalah default.aspx
         document.forms[0].action="default.aspx"
         // Inti dari trik ini adalah mengeset target form ke hidden IFrame
         document.forms[0].target=frameName;
         // setTimeout digunakan untuk mengupdate dokumen dengan thread yang terpisah,
         // jika tidak maka dokumen tidak akan baru terupdate setelah download selesai.
         window.setTimeout(function(){
             var uploadE=document.getElementById(upload);
             uploadE.parentElement.appendChild(document.createTextNode(uploadE.value));
             uploadE.parentElement.replaceChild(uploadE.cloneNode(true),uploadE);
         },100);
         document.forms[0].submit();
    }
  5. Buat tombol dan tambahkan attribute onclick untuk memanggil fungsi submitForm yang telah dibuat sebelumnya.

    <button onclick="javascript:submitForm('hiddenFrame','<%= fileUpload1.ClientID %>')">Upload</button>
  6. Tambahkan web kontrol label yang akan diisi dengan jam pertama kali halaman dimuat,

    <asp:Label ID="lblTime" runat="server" />
  7. Pada code behind, saat Page_Load set label dengan jam berjalan dan cek jika ada file yang diupload, simpan ke dalam server.

    protected void Page_Load(object sender, EventArgs e)
    {
         lblTime.Text = DateTime.Now.ToLongTimeString();
         if (fileUpload1.HasFile)
        {
             fileUpload1.SaveAs(Server.MapPath("App_Data/") + fileUpload1.FileName);
         }
    }
  8. Selesai

Dari langkah-langkah tersebut di atas, secara lengkap kode dapat dilihat sebagai berikut.

File default.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HiddenIFrameUpload._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>Untitled Page</title></head><body>    <asp:Label ID="lblTime" runat="server" />    <iframe name="hiddenFrame" src="blank.htm" style="display:none"></iframe>    <form id="form1" runat="server" enctype="multipart/form-data" >         <div id="uploadContainer">              <asp:FileUpload ID="fileUpload1" runat="server" />              <button onclick="javascript:submitForm('hiddenFrame','<%= fileUpload1.ClientID %>')">Upload</button>         </div>     </form>    <script type="text/javascript">         function submitForm(frameName,upload){             document.forms[0].action="Default.aspx"             document.forms[0].target=frameName;             window.setTimeout(function(){                  var uploadE=document.getElementById(upload);                  uploadE.parentElement.appendChild(document.createTextNode(uploadE.value));                  uploadE.parentElement.replaceChild(uploadE.cloneNode(true),uploadE);             },100);             document.forms[0].submit();    }    </script></body></html>

File default.aspx.cs


using System;
using System.Web;

namespace HiddenIFrameUpload
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblTime.Text = DateTime.Now.ToLongTimeString();
            if (fileUpload1.HasFile)
            {
                fileUpload1.SaveAs(Server.MapPath("App_Data/") + fileUpload1.FileName);
            }

        }
    }
}

HiddenIFrameUpload.zip (5.88 kb)


Permalink | Comments (14) | Post RSSRSS comment feed

Comments

geeks.netindonesia.net | Reply

Thursday, January 24, 2008 9:27 AM

pingback

Pingback from geeks.netindonesia.net

Ajax: FileUpload dengan Hidden IFrame - Ahmad Masykur

wyn Indonesia | Reply

Tuesday, January 29, 2008 12:39 AM

wyn

need help
error on web.config :

<providerOption name="CompilerVersion" value="v3.5"/>

thx b4

Newbie Indonesia | Reply

Monday, March 03, 2008 10:24 AM

Newbie

Terima kasih mas, atas artikelnya, saya punya permasalahan dengan AJAX,
untuk menampilkan data dari database secara bersamaan dengan beberapa lokasi yang berbeda dalam page yang sama, misalnya saya ingin menampilkan data harga buku, jumlah, dan diskon dari tabel buku, pada halaman buku,
dengan mengklik select/list box dari nama buku yang sudah diretrieve dari tabel buku.

Bagaimana caranya ya mas ---> Terima kasih

Wassalam

Newbie

Ahmad Masykur United States | Reply

Monday, March 03, 2008 10:34 AM

Ahmad Masykur

Tampilkan masing-masing informasi dengan kontrol yang berbeda. Misalkan harga buku dengan kontrol label1, jumlah di label2, diskon di label3. Masing-masing kontrol di-bind (atau diset manual) dari datasource yang diambil dari database.

Ahmad Masykur United States | Reply

Monday, March 03, 2008 3:45 PM

Ahmad Masykur

Wyn: error pada web.config tersebut karena Anda menggunakan .NET Framework 2.0. Pada program yang saya lampirkan, saya menggunakan Visual Studio 2008 dengan target framework .NET Framework 3.5. Hapus semua yang setting yang mengandung referensi ke .NET Framework 3.5

yudi Iceland | Reply

Friday, May 16, 2008 4:57 PM

yudi

saya mohon pencerahan,
saya buat page, ada validator nya
lalu di page yang sama saya buat ModalPopupExtender  yang berisi updatepanel, didalam update panel saya buat search untuk di tampilkan ke dalam gridview.
masalah nya pada saya klik tombol search yang berada di dalam ModalPopupExtender , validator nya jalan, jadi saya tidak bisa search krna di blok oleh validator.

thanks b4

Ahmad Masykur Indonesia | Reply

Monday, May 19, 2008 9:51 AM

Ahmad Masykur

Tambahkan ValidationGroup pada validator Anda. Dengan menambahkan ValidatorGroup, validator hanya akan bekerja dalam group yang ditentukan.

Fanamation Turkey | Reply

Friday, December 12, 2008 8:44 PM

Fanamation

Terima kasih mas, atas artikelnya, saya punya permasalahan dengan AJAX,
untuk menampilkan data dari database secara bersamaan dengan beberapa lokasi yang berbeda dalam page yang sama, misalnya saya ingin menampilkan data harga buku, jumlah, dan diskon dari tabel buku, pada halaman buku,
dengan mengklik select/list box dari nama buku yang sudah diretrieve dari tabel buku.

cayennepepper-diet.com | Reply

Saturday, January 10, 2009 1:44 AM

pingback

Pingback from cayennepepper-diet.com

Easy way to lose weight with lemon cayenne pepper diet | Cayenne Pepper Diet Information

cayennepepperdiet21.wordpress.com | Reply

Tuesday, January 13, 2009 6:21 AM

pingback

Pingback from cayennepepperdiet21.wordpress.com

Easy way to lose weight with lemon cayenne pepper diet « Cayenne Pepper Diet Blog

gmat Italy | Reply

Friday, January 23, 2009 5:18 AM

gmat

love this post
thanks

Neil United States | Reply

Thursday, January 29, 2009 5:38 PM

Neil

ASP.NET AJAX was released as a standalone extension to ASP.NET in January 2007 after a lengthy period of beta-testing. It was subsequently included with version 3.5 of the .NET Framework, which was released alongside Visual Studio 2008 in November 2007.

Diana Tyuleneva United States | Reply

Friday, February 06, 2009 6:31 PM

Diana Tyuleneva

ASP.NET AJAX is a set of technologies to add AJAX (Asynchronous JavaScript And XML) support to ASP.NET. It consists of a client-side script framework, server controls, and more.

Ahmad Masykur Indonesia | Reply

Friday, February 13, 2009 12:27 AM

Ahmad Masykur

I will write in English for the next posts. Thanks for the comment

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading