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".
[code:html]
[/code]
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
[code:html]
[/code]
4. Buat fungsi submitForm yang berfungsi melakukan submit terhadap hidden IFrame.
[code:js]
// 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();
}
[/code]
5. Buat tombol dan tambahkan attribute onclick untuk memanggil fungsi submitForm yang telah dibuat sebelumnya.
[code:html]
[/code]
6. Tambahkan web kontrol label yang akan diisi dengan jam pertama kali halaman dimuat,
[code:html]
[/code]
7. Pada code behind, saat Page_Load set label dengan jam berjalan dan cek jika ada file yang diupload, simpan ke dalam server.
[code:c#]
protected void Page_Load(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToLongTimeString();
if (fileUpload1.HasFile)
{
fileUpload1.SaveAs(Server.MapPath("App_Data/") + fileUpload1.FileName);
}
}
[/code]
8. Selesai
Dari langkah-langkah tersebut di atas, secara lengkap kode dapat dilihat sebagai berikut.
File default.aspx
[code:html] <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HiddenIFrameUpload._Default" %>
[/code]
File default.aspx.cs
[code:c#]
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);
}
}
}
}
[/code]
Referensi:
http://www.masykur.web.id/category/ASPNET.aspx
