php+iframe实现无刷新上传文件例子
上传文件用得最多的是ajax了,现在这里我们可以使用iframe 模仿了,下面php粉丝网小伙伴就来为各位同学整理一个frame实现无刷新上传文件例子,希望能帮助到各位朋友哦,使用label的for属性来取代js的event转移,解决IE下“SCRIPT5:拒绝访问”的问题.
html代码如下:
- <!DOCTYPE HTML>
- <html >
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
- <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script>
- // 当前上传对象
- var _current = null;
- // 上传回调方法
- function onUploadSuccess(info){
- // 控制台调试，可能是因为console没定义导致IE无法使用此功能
- typeof console.dir!=='undefined' && console.dir(info);
- // 上传成功
- if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){
- // 改变图片src，实现实时预览
- if(_current.find('img').size()>0)
- _current.find('img:eq(0)').prop('src', info.path);
- else
- _current.html('<img src="'+info.path+'" width="100%" height="100%" />');
- // 返回
- return;
- }
- // 上传失败则提示错误信息
- alert(info.info);
- // 返回
- return;
- }
- $(function(){
- $('label[for]').click(function(){
- _current = $(this);
- $('.uploadform')[0].reset();
- }); //开源软件:phpfensi.com
- $('.uploadform input:file').change(function(){
- $(this).parent().submit();
- });
- });
- </script>
- </head>
- <body>
- <label for="photo1" ></label>
- <label for="photo1" ></label>
- <form class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe">
- <input type="file" name="photo1" />
- <iframe name="uploadiframe"></iframe>
- </form>
- </body>
- </html>
php处理程序,代码如下:
- $retval = array('status'=>0, 'info'=>'', 'path'=>'');
- if(/*upload success*/){
- $retval['status'] = 1;
- $retval['path'] = 'somepath';
- }else{
- $retval['info'] = 'someerror';
- }
- echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>";
- exit;
简单总结:这个其实很简单在表单中我们action设置为上传php的模板文件,然后我们再在表单target打开方式设置为iframe的name即可.