使用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(); }); $('.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处理程序
| 代码如下 | 复制代码 |
|
<?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即可。
时间： 2024-09-10 03:04:53