上传文件用得最多的是ajax了,现在这里我们可以使用iframe 模仿了,下面一聚教程小伙伴就来为各位同学整理一个frame实现无刷新上传文件例子,希望能帮助到各位朋友哦。
使用label的for属性来取代js的event转移,解决IE下“SCRIPT5: 拒绝访问”的问题;
html代码
| 代码如下 | 复制代码 |
|
<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><br> // 当前上传对象<br> var _current = null;<br> // 上传回调方法<br> function onUploadSuccess(info){<br> // 控制台调试,可能是因为console没定义导致IE无法使用此功能<br> typeof console.dir!=='undefined' && console.dir(info);<br> // 上传成功<br> if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){<br> // 改变图片src,实现实时预览<br> if(_current.find('img').size()>0)<br> _current.find('img:eq(0)').prop('src', info.path);<br> else<br> _current.html('<img src="'+info.path+'" style="max-width:90%" style="max-width:90%" / alt="php+iframe实现无刷新上传文件例子" >');<br> // 返回<br> return;<br> }<br> // 上传失败则提示错误信息<br> alert(info.info);<br> // 返回<br> return;<br> }<br> $(function(){<br> $('label[for]').click(function(){<br> _current = $(this);<br> $('.uploadform')[0].reset();<br> });<br> $('.uploadform input:file').change(function(){<br> $(this).parent().submit();<br> });<br> });<br> </script> |
|
php处理程序
| 代码如下 | 复制代码 |
|
$retval = array('status'=>0, 'info'=>'', 'path'=>''); |
|
简单总结:这个其实很简单在表单中我们action设置为上传php的模板文件,然后我们再在表单target 打开方式设置为iframe的name即可。
立即学习“PHP免费学习笔记(深入)”;











