php+iframe实现无刷新上传文件案例
|
上传文件用得最多的是ajax了,现在这里我们可以使用iframe 模仿了,下面php粉丝网小伙伴就来为各位同学整理一个frame实现无刷新上传文件例子,希望能帮助到各位朋友哦,使用label的for属性来取代js的event转移,解决IE下“SCRIPT5:拒绝访问”的问题. html代码如下: <!DOCTYPE HTML> <html lang="en-US"> <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(); }); //开源软件:Cuoxin.com $('.uploadform input:file').change(function(){ $(this).parent().submit(); }); }); </script> </head> <body> <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> <label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label> <form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe"> <input type="file" name="photo1" id="photo1" /> <iframe style="display:none;" 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即可. （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
