thinkphp+jquery+iframe异步上传

来源：互联网发布：mac 使用oracle 编辑：程序博客网时间：2024/06/05 16:45

最近在做的项目要用到图片异步上传，由于ajax不能实现异步上传，所以只能用iframe，附上部分关键代码！

html页面代码

    <form method="post" action="__SELF__">    <input type="hidden" id="logo" size="40" name="Info[logo]" />        <table cellspacing="1" cellpadding="3" width="100%">         <tr>                <td class="label">Logo</td>                <td>                <img id="pre_img" />                    <input id="selImg" type="button" value="选择图片" />                </td>            </tr>

隐藏的iframe和点击弹出窗

<iframe style="display:none;" name="ifr"></iframe><div id="upload" style="position:absolute;display:none;padding:10px;border:1px solid #CCC;background:#FFF;width:360px;"><form id="pre_form" target="ifr" method="POST" action="__CONTROLLER__/ajaxUpload" enctype="multipart/form-data">图片：<input type="file" name="img" /><input type="submit" value="上传" /><a id="close" href="javascript:void(0);"> [关闭] </a></form></div>

js处理代码

<script>$("#close").click(function(){$("#upload").hide();});$("#selImg").click(function(){// 获取按钮的位置var p = $(this).position();var div = $("#upload");div.css({"left":p.left+"px","top":p.top+"px","display":""});});

提交到后台的php文件ajaxUpload，做你自己的上传或缩略图片操作

public function ajaxUpload(){// 读取上传图片的配置$config = C('UPLOAD_CONFIG');// 设置上传路径$config['savePath'] = 'Goods/Temp/';$upload = new \Think\Upload($config);// 执行上传$info = $upload->upload();if(!$info)die($upload->getError());// 设置模型原图地址$url = 'Uploads/'.$info['img']['savepath'] . $info['img']['savename'];$thumb_url = 'Uploads/'.$info['img']['savepath'] . 'sm_' .$info['img']['savename'];$image = new \Think\Image(); $image->open($url);$image->thumb(100, 100)->save($thumb_url);// 在子窗口中的执行JS把数据放到父窗口的表单中$index = __ROOT__;$js = '<script>';$js .=<<<JSparent.document.getElementById("logo").value='$url';parent.document.getElementById("pre_img").src='$index/$thumb_url';parent.document.getElementById("upload").style.display="none";parent.document.getElementById("pre_form").reset();JS;$js .= '</script>';echo $js;}

0 0