模拟 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;
}
}
模拟 Ajax 上传的更多相关文章
- 用iFrame模拟Ajax上传文件
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- Discuz模拟批量上传附件发帖
简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 模拟上传 discuz 附件逻辑 dz附件储存在 ...
- asp.net MVC ajax上传文件
普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- FormData对象实现文件Ajax上传
后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...
随机推荐
- HDU 1402 A * B Problem Plus (FFT求高精度乘法)
A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Redis的安装与idea中的使用
一.Redis的安装 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开 ...
- java_hibernate
入门:http://jingyan.baidu.com/article/cbf0e500965a352eab289368.html 步骤1.查看是否hibernate支持:file-->plug ...
- Kubernetes ServiceAccount的配置
开始配置Kubernetes集群的时候为了少出问题,都是在apiserver配置中去掉ServiceAccount采用非安全连接的方式,但在后面配置FEK日志的过程中,很多时候绕不开这个安全机制,但因 ...
- windows内核编程--头文件包括的奇葩的问题
先给解决的方法:假设您觉得您的头文件包括木有问题,请用WDK的build命令编译试试,非常有可能是由于您用了VS 2010 + EASY SYS 环境的问题 使用VS 2010 + EASY SYS ...
- Selenium webdriver Java 查找元素
1.简单查找 By ID: WebElement element=driver.findElement(By.id("userId")); By Name:WebElement e ...
- Ubuntu14.04使用samba服务器共享Home目录
这里记录一下,以Ubuntu 14.04为例. 1.安装samba服务器. sudo apt-get install samba 2.修改配置文件 sudo vim /etc/samba/smb. ...
- Python 提取Twitter tweets中的元素(包括text, screen names, hashtags)
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-1 @author: guaguastd @name: ex ...
- World Wind Java开发之三 显示状态栏信息
先来看下本篇博客索要达到的效果: 找到源代码下的gov.nasa.worldwind.util下的StatusBar.java文件,能够看到状态栏显示的信息主要包含视点高度以及相应空间点三维坐标以及是 ...
- EazyUI主页框架搭建纯JS样例
採用Jfinal+EazyUI 执行起来就好能够了 眼下还未增加后台代码 纯JS代码搭建的一个二级菜单+主页 客户换肤, 给使用EazyUI的新人一个高速可用的JS 搭建界面 也给自己保存下 界面 ...