11
2012
11

一个实现无刷新文件上传的思路

上传文件,要跳转页面总是显得那么的不人道,尤其是多文件上传时,就非常不人道了。我开始用纯php+ajax来实现,异常的复杂,我不知道其他语言有米有好的方法。但是有个思路,也许并不那么完美,但是真的让这个实现变得简单很多。以图片上传为例,分享下:

先要有个表单

XML/HTML代码
  1. <form method="POST" action="{SITE_URL}index.php?app=user&ac=do&ts=setface" enctype="multipart/form-data" target="form-target" onsubmit="checkSetFace();" >  
  2. <div class="m">从你的电脑上选择图像文件:(仅支持jpg,gif,png格式的图片)</div><br>  
  3.   
  4. <input type="file" name="picfile" id="picfile" />  
  5. <input class="submit" type="submit" value="{php echo L::setface_uploadphoto}" />  
  6.  
  7. <div id="Result1"></div> 
  8. </form>  

表单和平常经常用到的表单并无多大区别,但说没区别也完全正确,细心的人会发现,表单有一个target属性,target在加超链接时经常出现的一个属性,_blank表示弹出新窗口,_top等等一些常用的。还有一个地方,也是经常用到,form表单的target属性和这个是一个作用,做后台程序就会经常用到一个叫框架的东西,说到这,很多人应该差不多猜出要干吗了。对的,正如你所想,这里就是引用一个iframe。

XML/HTML代码
  1. <iframe style="width:0; height:0; border:0;" name="form-target"></iframe>  

放在form表单所在页面的任何位置。这个iframe就是为了有一个iframe用来模拟打开窗口,让form表单提交到这里,除此之外不做其他任何作用,也无需显示任何内容,所以他的style设置全为0,在页面中是完全看不到什么东西。

处理界面返回相应的可接收的信息,前端作相应的处理,一个无刷新上传的效果就轻而易举的出来了。

PHP代码
  1. echo'<script type="text/javascript"> 
  2.             window.top.window.Result_SetFace('.$result.'); //返回处理参数,调用处理函数
  3.         </script>';  

js再写个与html页面交互的函数

JavaScript代码
  1. function Result_SetFace(Result)  
  2. {   
  3.     var msg;   
  4.     switch (Result)   
  5.     {   
  6.         case 1:   
  7.             msg = "上传成功";   
  8.             document.getElementById('processing').innerHTML = msg;  
  9.             window.location.reload();  
  10.             break;   
  11.         default:   
  12.             msg = "上传文件失败";   
  13.     }   
  14.     $('Result1').innerHTML = msg;   
  15. }   

OK,是不是简单了不只一点点??

« 上一篇下一篇 »

相关文章:

CodeIgniter中get_post 方法需要注意的地方  (2014-2-2 22:55:3)

PHP中判断变量为空的几种方法  (2014-1-24 9:40:14)

#学习笔记#php字符递增问题  (2013-6-4 10:10:47)

随便弄了个天气预报  (2013-3-24 2:23:12)

一个简单的MySql连接操作类  (2013-1-7 13:33:30)

#学习笔记#php实现计划任务  (2012-11-23 21:2:27)

#学习笔记#php时间格式参数  (2012-11-20 9:24:22)

ajax用post方法传递数据  (2012-10-17 23:22:41)

php+ajax+json实现分页  (2012-10-5 21:59:44)

php实现手机号码归属地查询  (2012-10-2 22:58:14)