Ajax file upload - upload file bằng ajax đơn giản › Code › Tutorial

Việc cần làm là tạo ra một form html, import code ajax file upload và viết code cho sự kiện onsubmit. Xem ví dụ sử dụng ajax file upload sau: Code file index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Iframe Ajax</title>
	<script type="text/javascript" src="webtoolkit.aim.js"></script>
	<script type="text/javascript">
		function startCallback() {
			// viết code khi click nút upload và bắt đầu upload.
			return true;
		}
 
		function completeCallback(response) {
			// viết code xữ lý sau khi đã upload xong, ví dụ ở đây đưa kết quả trả về vào nr.
			document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
			document.getElementById('r').innerHTML = response;
		}
	</script>
</head>
 
<body>
 
	<form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
		<div><label>Name:</label> <input type="text" name="form[name]" /></div>
		<div><label>File:</label> <input type="file" name="form[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): <pre id="r">
</pre>
</div>
 
</body>
</html>

Code file 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 = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
		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);
		}
	}
 
}

Code file index.php để xử lý kết quả gửi từ ajax file upload: Ở đây chỉ viết một đoạn PHP đơn giản in ra tên các trường trong form được gửi đi bằng ajax file upload.

&lt;?php
 
 print_r($_REQUEST['form']);
 
?>

Download code của ví dụ này tại đây.