用jQuery Form Plugin实现Ajax无刷新的文件上传

Laoer — Thu, 26 Feb 2009 08:37:13 +0000

在我以前的意识里，觉得用JavaScript或Ajax提交文件表单似乎是一件麻烦的事情，也没有太仔细的研究，后来看jQuery的时候，发现了jQuery Form Plugin这个插件，它方便的实现了Ajax方式的表单提交，例子里也包括了文件表单的提交，那我也来试一下吧，还是用Kohana（最近专注于这个，而且PHP开发要快多了，要是用Struts，要费好多功夫）。

要Kohana支持上传，先要配置一些upload的参数，把system\config\upload.php拷贝到application/config下，里面的参数做好设置，具体参考Kohana的文档吧，之后创建一个Controller

class Myupload_Controller extends Top_Controller {
 
	public function index() {
		$view = new View ("upload");		
		$view->msg = "Upload File";
 
		$view->render ( TRUE );
	}
 
	public function upload() {		
		$filename = upload::save('myfile');
		echo $filename;
 
		exit ();
	}
 
}

Top_Controller为我自己创建的类，也继承自Kohana的Controller，之后创建upload.php的view文件

<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
        	var options = { 
        		target:        '#fileinfo'   // target element(s) to be updated with server response         
        	};
 
        	$('#myForm').submit(function() { 
        		$(this).ajaxSubmit(options);
        		return false; 
        	});
 
        }); 
</script>
</head>
 
<body>
<h2></h2>
<form id="myForm" action="myupload/upload" method="post"
	enctype="multipart/form-data">
	<input name="myfile" type="file" />
	<input type="submit" value="Submit Comment" />
</form>
<div id="fileinfo"></div>
</body>
</html>

在这里我们用jQuery Form Plugin来提交表单，之后将信显示在“fileinfo”这个div里，去试试效果吧。

在http://malsup.com/jquery/form/里有详细的API和例子，同时http://malsup.com/jquery/里也有其他的一些不错的jQuery的插件。

I@laoer.com » Ajax

用jQuery Form Plugin实现Ajax无刷新的文件上传