Upload bergaya AJAX dengan iframe.

Upload file dengan AJAX tidak memungkinkan. AJAX sebenarnya tidak mem-post form ke server, namun mengirim data yang telah dipilih ke server dalam bentuk request POST atau GET.

Karena javascript tidak bisa mengambil fle dari komputer user dan mengirimkannya ke server, maka AJAX juga tidak melakukannya. Kamu harus make submit form seperti biasanya.

Jika kamu pernah melihat atau membaca nya di suatu tempat, sebenarnya itu tidak melewati AJAX. Dalam hal ini upload file terjadi melalui iframe. Kamu harus memakai iframe untuk mengupload file. Jadi kamu bisa menggunakan iframe untuk upload secara asinkron (memang seperti AJAX tapi itu bukan AJAX)

Lalu gimana caranya upload file yang ada di Gmail? Coba pakai fungsi Javascript ini, jika kamu pingin fungsi yang sama.

<script type=””text/javascript””>
function fileUpload(form, action_url, div_id)
{ // Create the iframe…
var iframe = document.createElement(“iframe”);
iframe.setAttribute(“id”,”upload_iframe”);
iframe.setAttribute(“name”,”upload_iframe”);
iframe.setAttribute(“width”,”0″);
iframe.setAttribute(“height”,”0″);
iframe.setAttribute(“border”,”0″);
iframe.setAttribute(“style”,”width: 0; height: 0; border: none;”);
// Add to document…
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name=”upload_iframe”;
iframeId = document.getElementById(“upload_iframe”);
// Add event…
var eventHandler = function()
{
if (iframeId.detachEvent) iframeId.detachEvent(“onload”, eventHandler);
else
iframeId.removeEventListener(“load”, eventHandler, false);
// Message from server…
if (iframeId.contentDocument)
{
content = iframeId.contentDocument.body.innerHTML; }
else if (iframeId.contentWindow)
{ content = iframeId.contentWindow.document.body.innerHTML; }
else if (iframeId.document)
{ content = iframeId.document.body.innerHTML; }
document.getElementById(div_id).innerHTML = content;
// Del the iframe…
setTimeout(‘iframeId.parentNode.removeChild(iframeId)’, 250);
}

if (iframeId.addEventListener)
iframeId.addEventListener(“load”, eventHandler, true);
if (iframeId.attachEvent)
iframeId.attachEvent(“onload”, eventHandler);
// Set properties of form…
form.setAttribute(“target”,”upload_iframe”);
form.setAttribute(“action”, action_url);
form.setAttribute(“method”,”post”);
form.setAttribute(“enctype”,”multipart/form-data”);
form.setAttribute(“encoding”,”multipart/form-data”);
// Submit the form…
form.submit();
document.getElementById(div_id).innerHTML = “Uploading…”;
}
</script>

<form> <input name=””datafile”” type=””file”” />
<input onclick=””fileUpload(this.form,’index.php’,’upload’);” type=””button”” value=””upload”” /> </form>

semoga membantu..