跳至正文
i@laoer.com

技术、生活、感悟 -- Laoer的博客

i@laoer.com

技术、生活、感悟 -- Laoer的博客

  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
关

搜索

  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
i@laoer.com

技术、生活、感悟 -- Laoer的博客

i@laoer.com

技术、生活、感悟 -- Laoer的博客

  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
关

搜索

  • 首页
  • 人工智能
  • 互联网
  • 商业观察
  • 天乙软件
  • 用药有数
  • 隐私政策
  • 关于
  • X
JavaScript

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

作者 Laoer
2009年2月26日 1 分钟阅读
0

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 ();
	}
 
}

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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title><?php echo $msg;?></title>
<script type="text/javascript" src="<?=url::base()?>js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?=url::base()?>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><?php echo $msg;?></h2>
<form id="myForm" action="<?=url::base()?>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>

<html> <head> <title><?php echo $msg;?></title> <script type="text/javascript" src="<?=url::base()?>js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="<?=url::base()?>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><?php echo $msg;?></h2> <form id="myForm" action="<?=url::base()?>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的插件。

标签:

AjaxJavaScriptjQuery
作者

Laoer

1999年开始做互联网,做过开发、技术管理,也创过几次业。 现在依然在一线做产品、写代码、折腾AI。 关注AI如何重新改变软件、公司和人的工作方式。 公众号:Laoer杂谈。

关注我
其他文章
上一个

Kohana的Events和Hooks研究

下一个

追逐互联网的梦想

暂无评论!成为第一个。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

微信订阅

欢迎订阅微信公众号--“Laoer杂谈”,搜索微信号:laoertalk,“Laoer杂谈”是关于技术、创业、生活的杂谈与随笔,希望与大家多多交流。

用药有数·DoseLoop

用药有数·DoseLoop 一款不会响完就消失的用药提醒。每次计划用药持续追踪,直到有明确结果。支持慢病、老人、ADHD 等各种用药场景。

标签

AI AI Agent AI Coding Anthropic ChatGPT Claude Claude Code Codex DeepMind DeepSeek DeepSeek Harness Gemini Google GPT iOS iPhone Java JavaScript jQuery Kimi Kohana Linux LLM Mac Memcached Meta Mysql Nginx OpenAI Oracle PHP RSA Sam Altman SNS Struts Tomcat Web2.0 互联网 人工智能 创业 大模型 工作 旅游 生活 管理

日历

2026 年 11 月
日 一 二 三 四 五 六
1234567
891011121314
15161718192021
22232425262728
2930  
« 10 月    

近期评论

  • AI Coding 文档管理:写代码越来越快,文档却更重要了 发表在《AI写代码已经不稀奇了,真正的变化是很多东西突然值得做了》
  • 大模型商业化:中国AI模型越来越强,为什么反而更难赚钱? 发表在《DeepSeek V4涨价后,真正的问题不是谁在用,而是谁在赚钱》
  • Laoer 发表在《AI 有没有意识还没定论,Anthropic 为什么先限制虐待它?》
  • 爱生活 发表在《AI 有没有意识还没定论,Anthropic 为什么先限制虐待它?》
  • 爱生活 发表在《AI 有没有意识还没定论,Anthropic 为什么先限制虐待它?》
  • AI数据分析如何改变BI工作流?15分钟完成一份运营报告 发表在《我把DeepSeek Harness接进生产环境后,发现AI运维真正改变的不是查日志》
  • 99%的代码都由AI写了,那程序员真正值钱的是什么? – i@laoer.com 发表在《我把DeepSeek Harness接进生产环境后,发现AI运维真正改变的不是查日志》
  • 爱生活 发表在《你的一分钟语音,可能是别人的十分钟》
  • 爱生活 发表在《Bill Gates为什么突然不相信“AI最终会创造更多工作”了?》
  • DeepSeek Harness来了,国产AI Coding终于开始补最短的那块板 – i@laoer.com 发表在《这次真不慌了,Claude随时可以取消订阅》

分类

  • iOS
  • Java
  • JavaScript
  • Linux
  • Mac
  • PHP
  • Web2.0
  • 互联网
  • 人工智能
  • 创业
  • 博客文章
  • 商业观察
  • 工作
  • 数据库
  • 构架设计
  • 生活

归档

  • 2026 年 11 月
  • 2026 年 10 月
  • 2026 年 9 月
  • 2026 年 8 月
  • 2026 年 7 月
  • 2026 年 6 月
  • 2026 年 1 月
  • 2024 年 12 月
  • 2024 年 10 月
  • 2024 年 8 月
  • 2024 年 7 月
  • 2023 年 12 月
  • 2023 年 1 月
  • 2022 年 8 月
  • 2021 年 12 月
  • 2021 年 10 月
  • 2020 年 12 月
  • 2020 年 1 月
  • 2018 年 12 月
  • 2018 年 8 月
  • 2018 年 4 月
  • 2017 年 12 月
  • 2016 年 12 月
  • 2016 年 8 月
  • 2016 年 2 月
  • 2015 年 12 月
  • 2015 年 1 月
  • 2013 年 6 月
  • 2013 年 5 月
  • 2012 年 11 月
  • 2012 年 7 月
  • 2012 年 6 月
  • 2012 年 5 月
  • 2012 年 3 月
  • 2012 年 1 月
  • 2011 年 12 月
  • 2011 年 11 月
  • 2011 年 10 月
  • 2011 年 9 月
  • 2011 年 8 月
  • 2010 年 11 月
  • 2010 年 2 月
  • 2010 年 1 月
  • 2009 年 12 月
  • 2009 年 11 月
  • 2009 年 9 月
  • 2009 年 7 月
  • 2009 年 6 月
  • 2009 年 5 月
  • 2009 年 4 月
  • 2009 年 3 月
  • 2009 年 2 月

其他操作

  • 登录
  • 条目 feed
  • 评论 feed
  • WordPress.org
Copyright 2026 — i@laoer.com. All rights reserved. Blogsy WordPress Theme