当前位置：首页 > 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. } 
  30. $(function(){ 
  31.     $('label[for]').click(function(){ 
  32.         _current    = $(this); 
  33.         $('.uploadform')[0].reset(); 
  34.     });  //开源软件:phpfensi.com 
  35.     $('.uploadform input:file').change(function(){ 
  36.         $(this).parent().submit(); 
  37.     }); 
  38. }); 
  39. </script> 
  40. </head> 
  41. <body> 
  42.  
  43. <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> 
  44. <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> 
  45.  
  46. <form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe"> 
  47.     <input type="file" name="photo1" id="photo1" /> 
  48.     <iframe style="display:none;" name="uploadiframe"></iframe> 
  49. </form> 
  50.  
  51. </body> 
  52. </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. } 
  8. echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>"; 
  9. exit; 

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

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

分享到：

推荐文章

热门文章

最新评论文章