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的更多相关文章

  1. ASP.NET MVC使用jQuery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  2. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

  3. jQuery无刷新上传学习心得

    记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...

  4. jQuery无刷新上传之uploadify

    引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...

  5. C#_Jquery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  8. jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  9. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

随机推荐

  1. 洛谷 P2392 kkksc03考前临时抱佛脚

    P2392 kkksc03考前临时抱佛脚 题目背景 kkksc03的大学生活非常的颓废,平时根本不学习.但是,临近期末考试,他必须要开始抱佛脚,以求不挂科. 题目描述 这次期末考试,kkksc03需要 ...

  2. BZOJ 3675 APIO2014 序列切割 斜率优化DP

    题意:链接 方法:斜率优化DP 解析:这题BZ的数据我也是跪了,特意去网上找到当年的数据后面二十个最大的点都过了.就是过不了BZ. 看到这道题自己第一发DP是这么推得: 设f[i][j]是第j次分第i ...

  3. 【JEECG技术博文】JEECG 简单实例解说权限控制

    JEECG简单实例解说权限控制 请大家点击这里为我们投票.2015博客之星.很多其他分享敬请期待 博文地址:http://blog.itpub.net/30066956/viewspace-18687 ...

  4. worktools-monkey 测试工具的使用

    配置电脑环境 1.进入用户目录下的bin cd ~/bin 2.链接一下monkey monkey -> /home/zhangshuli/git/vanzo_team/xulei/monkey ...

  5. 内存泄漏与指针悬挂&野指针介绍

    内存泄漏概念:内存泄漏时指动态申请的内存空间没有正常释放,但是也不能继续使用的情况. 例如: char *ch1; ch1 = new char('A'); char = *ch2 = new cha ...

  6. BZOJ3529: [Sdoi2014]数表(莫比乌斯反演,离线)

    Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...

  7. JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  8. Java web开发了解

    1.什么是Java web项目? F.A.Q: 服务器 服务器,也称伺服器,是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力.服务器的构 ...

  9. Oracle学习总结(10)——45 个非常有用的 Oracle 查询语句

    ******************************  日期/时间 相关查询 *****************************       -- 1.获取当前月份的第一天  sele ...

  10. update进行跨表之间的更新

    有时我们可能须要多个表之间进行更新数据. 我们能够使用这个语句 UPDATE table1,table2 SET table1.column=table2.column, table1.column1 ...