jquery 无刷新上传的小function
function zll_up(click_id,up_url,text_id,show_id){
this.create = function(){}
//当点击指定元素时,创建iframe form input(file)等元素
$("#"+click_id).click(function(){
console.log('click');
$("body").append("<form action='"+up_url+"' method='post' enctype='multipart/form-data' target='iframe_"+click_id+"' style='display:none;' name='form_"+click_id+"' id='form_"+click_id+"'><input type='file' name='tupian_"+click_id+"' id='tupian_"+click_id+"'></form>");
$("body").append("<iframe style='display:none;' name='iframe_"+click_id+"' id='iframe_"+click_id+"'></iframe>");
$('#tupian_'+click_id).change(function(){
console.log('change');
var file = document.getElementById("tupian_"+click_id).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(evt){
$("#"+show_id).html('<img style="width:100%;height:100%;" src="' + evt.target.result + '" />');
}
$("#form_"+click_id).submit();
});
$("#iframe_"+click_id).on("load",function(){
console.log('load');
var data = $(window.frames['iframe_'+click_id].document.body).find("textarea").html();
console.log(data);
$("#"+text_id).val(data);
//当上传完成时删除之前创建的元素
console.log('remove');
$("#iframe_"+click_id).remove();
$("#form_"+click_id).remove();
});
$("#tupian_"+click_id).click();
});
}
js代码
<div class="control-group">
<label class="control-label item-label" >上传图片 (750*1525)<span class="check-tips"></span></label>
<div class="controls uploadrow2" data-max="1" title="点击修改图片" rel="cover" id="upclick">
<input type="hidden" name="img" id="img" value="{$art.img}">
<div class="upload-img-box" rel="img" id="imgshow" style="height:auto;">
<if condition="!empty($art['img'])">
<img src="__UPLOADS__/{$art.img}"/>
</if>
</div>
</div>
</div>
<script type="text/javascript" src="引入上面的js代码"></script>
<script type="text/javascript">
zll_up("upclick","{:U("$con_name/z_upload")}","img","imgshow");
</script>
html代码
function z_upload(){
//单文件上传
//公用上传函数 zll 2017-6-7 11:35:44
//用于iframe的无刷新上传
$config = array(
'maxSize' => 3145728,
'rootPath' => './Uploads/',
'savePath' => '',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => true,
'subName' => array('date','Ymd'),
);
$upload = new \Think\Upload($config);// 实例化上传类
$info = $upload->upload();
if(!$info) {
// 上传错误提示错误信息
// echo $upload->getError();
echo "<textarea>error</textarea>";
}else{// 上传成功
echo "<textarea>".$info[array_keys($info)[0]]['savepath'].$info[array_keys($info)[0]]['savename']."</textarea>";
}
}
PHP代码(thinkphp3.2.3)
jquery 无刷新上传的小function的更多相关文章
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- jQuery无刷新上传之uploadify简单试用
先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- jQuery无刷新上传之uploadify
引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...
- C#_Jquery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
随机推荐
- C++中的纯虚函数
---恢复内容开始--- 在C++中的一种函数申明被称之为:纯虚函数(pure virtual function).它的申明格式如下 class CShape { public: ; }; 在什么情况 ...
- Linux下的一个高速跳转到上N层文件夹的简单方法
编辑文件 vim .bashrc (使改动在当前用户下有效) 或者 vim /etc/profile (须要在root用户下运行,使改动在全部用户下有效) 在文件结尾加入别名 alias cd1=' ...
- mac下的词典翻译快捷键
mac下的词典翻译快捷键:cmd+ctl+d;很方便
- 使用NPOI时写的几个辅助方法
简介:包含:获取单元格合并信息GetMergedCellAddress.获取引用单元格字符串ConvertAddressToString.获取单元格字符串格式内容CellValueToString p ...
- Windows/Linux下磁盘使用的图形化工具简介
Windows/Linux下磁盘使用的图形化工具简介 如何以图形界面查看磁盘及分区的大小及剩余容量呢?今天我为大家介绍两款Windows/Linux下磁盘使用的图形化工具分别是Spacesniff ...
- Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件
NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...
- Mysql多实例安装+主从复制+读写分离 -学习笔记
Mysql多实例安装+主从复制+读写分离 -学习笔记 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px ...
- Android滚轮选择器实现
思路: 1.布局,整个控件的布局,事实上就是用代码取带xml来实现当前布局 2,能够滑动的(即滚轮).事实上是一个ScrollView 3.推断滑动状态的,有protected void onScro ...
- imageView-scaleType 图片压缩属性
今天用到了图片压缩的属性,自己参照网上的说明,验证了一下,截图如下 (1)当图片背景是方形的时候 代码如下 <LinearLayout android:id="@+id/l31&quo ...
- java list 容器的ConcurrentModificationException
java中的很多容器在遍历的同时进行修改里面的元素都会ConcurrentModificationException,包括多线程情况和单线程的情况.多线程的情况就用说了,单线程出现这个异常一般是遍历( ...