----------------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;
}
}

模拟 Ajax 上传的更多相关文章

  1. 用iFrame模拟Ajax上传文件

    前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...

  2. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  3. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  4. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  5. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  6. Discuz模拟批量上传附件发帖

    简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 模拟上传 discuz 附件逻辑 dz附件储存在 ...

  7. asp.net MVC ajax上传文件

    普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...

  8. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  9. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

随机推荐

  1. FTTB FTTC FTTH FTTO FSA

    FTTB Fiber to The Building 光纤到楼 FTTC Fiber to The Curb 光纤到路边 FTTH Fiber to The Home 光纤到家 FTTO Fiber ...

  2. debian中添加sudo命令

    解决方法(root命令) apt-get install sudochmod u+w /etc/sudoers //给此文件增加写入权限gedit /etc/sudoers找到root ALL=(AL ...

  3. springBoot框架的一些概念

    Spring的发展史1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和xml ...

  4. 简化调用Web Service

    年前在客户那里做POC,因为成型的OTMCS暴露Web Service的Schema太长,导致ICS无法支持和映射,讨论过后决定对Web Service调用进行封装,因OTMCS WebService ...

  5. es6的模块化;js的模块化

    现在感觉Java.Python.Js都是越来越工程花,模块化.懂得每个模块的功能和使用场景,你很快的就能搭起一个功能齐备的应用.至于应用的性能.稳定性等,还在于你对模块的理解深度以及组合的成熟度,就看 ...

  6. 有关fallback diffuse unity的神奇的事情

    fallback diffuse 导致tris面片增加 double了 等于又画了一遍 很奇怪(只有一台机器是这样的) 这事情真坑我跟到最后 在一个最简测试场景 fallback diffuse替换成 ...

  7. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...

  8. vue手机端横屏竖屏切换

    1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} }   2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...

  9. ScrollView反弹效果

    public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点 ...

  10. 金典 SQL笔记(2)

    由于在本地笔记上写的.CSDN markdown编辑器仅仅支持.md格式导入, 图片没办法直接导进去.写的多了懒的一张一张图片切图上传; 直接整个文章切成图片上传上去了.