AJAX 를 이용한 파일 업로드 (iframe method)

AJAX file upload

Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code.

You need to create a form with file fields you wish to upload and define “onsubmit” event. Look at the example below how to do that.

Tested in IE5.5+, FF1.0+, OP 8.0+

DEMO

Source code for index.html

 
<script src="webtoolkit.aim.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
 
<form action="index.php" method="post">
 
<div><label>Name:</label>
<input name="form[name]" type="text" /></div>
 
 
<div><label>File:</label>
<input name="form[file]" type="file" /></div>
 
 
<div>
<input type="submit" value="SUBMIT" /></div>
 
</form>
<hr />
 
<div># of submited forms: <span id="nr">0</span></div>
 
 
<div>last submit response (generated by form action - index.php file): 
</div>

Source code for webtoolkit.aim.js

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*
**/
 
AIM = {
 
	frame : function(c) {
 
		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '';
		document.body.appendChild(d);
 
		var i = document.getElementById(n);
		if (c && typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}
 
		return n;
	},
 
	form : function(f, name) {
		f.setAttribute('target', name);
	},
 
	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c && typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},
 
	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}
 
		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}
 
}

Source code for index.php

print_r($_REQUEST['form']); 

참조 : http://www.webtoolkit.info/ajax-file-upload.html