当前位置:首页 > PHP教程 > php上传下载 > 列表

php+iframe实现无刷新上传文件例子

发布:smiling 来源: PHP粉丝网  添加日期:2015-04-09 16:00:17 浏览: 评论:0 

上传文件用得最多的是ajax了,现在这里我们可以使用iframe 模仿了,下面php粉丝网小伙伴就来为各位同学整理一个frame实现无刷新上传文件例子,希望能帮助到各位朋友哦,使用label的for属性来取代js的event转移,解决IE下“SCRIPT5:拒绝访问”的问题.

html代码如下:

  1. <!DOCTYPE HTML> 
  2. <html lang="en-US"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title></title> 
  6. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
  7. <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
  8. <script> 
  9. // 当前上传对象 
  10. var _current    = null; 
  11. // 上传回调方法 
  12. function onUploadSuccess(info){ 
  13.     // 控制台调试,可能是因为console没定义导致IE无法使用此功能 
  14.     typeof console.dir!=='undefined' && console.dir(info); 
  15.     // 上传成功 
  16.     if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){ 
  17.         // 改变图片src,实现实时预览 
  18.         if(_current.find('img').size()>0) 
  19.             _current.find('img:eq(0)').prop('src', info.path); 
  20.         else 
  21.             _current.html('<img src="'+info.path+'" width="100%" height="100%" />'); 
  22.         // 返回 
  23.         return
  24.     } 
  25.     // 上传失败则提示错误信息 
  26.     alert(info.info); 
  27.     // 返回 
  28.     return
  29. $(function(){ 
  30.     $('label[for]').click(function(){ 
  31.         _current    = $(this); 
  32.         $('.uploadform')[0].reset(); 
  33.     });  //开源软件:phpfensi.com 
  34.     $('.uploadform input:file').change(function(){ 
  35.         $(this).parent().submit(); 
  36.     }); 
  37. }); 
  38. </script> 
  39. </head> 
  40. <body> 
  41.  
  42. <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> 
  43. <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> 
  44.  
  45. <form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe"
  46.     <input type="file" name="photo1" id="photo1" /> 
  47.     <iframe style="display:none;" name="uploadiframe"></iframe> 
  48. </form> 
  49.  
  50. </body> 
  51. </html> 

php处理程序,代码如下:

  1. $retval = array('status'=>0, 'info'=>'''path'=>''); 
  2. if(/*upload success*/){ 
  3.     $retval['status'] = 1; 
  4.     $retval['path'] = 'somepath'
  5. }else
  6.     $retval['info'] = 'someerror'
  7. echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>"
  8. exit

简单总结:这个其实很简单在表单中我们action设置为上传php的模板文件,然后我们再在表单target打开方式设置为iframe的name即可.

Tags: iframe无刷新上传 php无刷新上传

分享到: