----------------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. PHP反射(ReflectionClass、ReflectionMethod)在ThinkPHP框架的控制器调度模块中的应用

    ThinkPHP框架的控制器模块是如何实现 前控制器.后控制器,及如何执行带参数的方法? PHP系统自带的 ReflectionClass.ReflectionMethod 类,可以反射用户自定义类的 ...

  2. 谁说 JavaScript 很简单了?

    转载请注明出处,保留原文链接以及作者信息 本文介绍了 JavaScript 初学者应该知道的一些技巧和陷阱.如果你是老司机,就当做回顾了,哪里有写的不好的地方欢迎指出. 1. 你是否尝试过对一个数字数 ...

  3. AE 开发添加新增字段 报错

    在为现有要素类新增字段时,有可能会爆出该表正被其他程序或其他人使用,这时我们就会添加失败,解决办法如下: 在新增字段之前,先修改SchemaLock的状态 ISchemaLock pSchemaLoc ...

  4. Swift,初始化

    1.class中的值是没办法不赋值,不然会报错,那么就有个init的方法初始化(这个方法使得实例时必须加上参数) class test{ var a:String var b:Int init(a:S ...

  5. javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  6. 代码这样写更优雅(Python 版)(转载)

    转载:https://mp.weixin.qq.com/s?timestamp=1498528588&src=3&ver=1&signature=DfFeOFPXy44ObCM ...

  7. HA分布式集群配置三 spark集群配置

    (一)HA下配置spark 1,spark版本型号:spark-2.1.0-bin-hadoop2.7 2,解压,修改配置环境变量 tar -zxvf spark-2.1.0-bin-hadoop2. ...

  8. MongoDB分片集群新增分片(自用)

    机器IP为192.168.58.11,计划在上面新建两个分片并添加到原有分片集群中. 实施如下: 1.58.11创建mongodb文件夹 mkdir -p /opt/mongodb cd  /opt/ ...

  9. SharePoint 2013 项目部署

    SharePoint 2013 项目部署 本人刚接触sharepoint不久,是个小菜鸟,而且上手版本是2013,对10和07版也没有太多的了解.最近由于项目需要本人磕磕碰碰部署了sharepoint ...

  10. [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional

    Very differently to AngularJS (v1.x), Angular now has a hierarchical dependency injector. That allow ...