模拟 Ajax 上传

----------------view-----------------------------------
<form method="post" action="__SELF__">
<input type="hidden" id="logo" size="40" name="logo" />
                   <li>
                    <label>Logo</label>
                    <img id="pre_img" />
                    <input id="selImg" type="button" value="选择图片" />
</form>

----------------------弹出层-------------------------

<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":""
    });
});
</script>


--------------------------控制器-------------------

//注意   Good/Temp目录需要自己手动创建
 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);
        #设置图片显示
        $show_img="shop_tp/".$thumb_url;
        // 在子窗口中的执行JS把数据放到父窗口的表单中
        $js = '<script>';
        $js .=<<<JS
        parent.document.getElementById("logo").value='$url';
        parent.document.getElementById("pre_img").src='/$show_img';
        parent.document.getElementById("upload").style.display="none";
        parent.document.getElementById("pre_form").reset();
JS;
        $js .= '</script>';
        echo $js;
    }
}

 

posted @ 2014-12-08 15:22  麦田守望者~  阅读(228)  评论(0编辑  收藏  举报