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. 雷观(二十三)-IT互联网技术,不拼创新拼努力,特别低公平

    上次发表"雷观(二十二)"是在2015年3月7日,一转眼,就快到了11月.  前段时间,终于狠下心来,写了本篇,第二十三啦.  小雷同志,要加油了~  早日达到百篇雷观的里程碑~  ...

  2. Java生产者与消费者(上)

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 生产与消费者模式,是编程中最常用的模式之一,在多线程中应用比较明显.个人理解:在自助餐厅,厨师在不断 ...

  3. C++里面virtual函数及虚表大小

    实验了下面的函数: #include <vector> #include <iostream> using namespace std; class A { public: v ...

  4. android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件

    网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次 ...

  5. Codeforces #258 Div.2 E Devu and Flowers

    大致题意: 从n个盒子里面取出s多花.每一个盒子里面的花都同样,而且每一个盒子里面花的多数为f[i],求取法总数. 解题思路: 我们知道假设n个盒子里面花的数量无限,那么取法总数为:C(s+n-1, ...

  6. BZOJ 1009 GT考试 (AC自动机 + 矩阵乘法加速dp)

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 准考证号为\(n\)位数\(X_1X_2....X_n(0<=X_ ...

  7. 28.semaphore跨进程通信

    根据id创建Semaphore,并初始化有一个信号量可用 name类型是char *...; HANDLE hsem = CreateSemaphoreA(NULL, 1, , name); 关闭句柄 ...

  8. 从“窃听门”事件解读手机Rootkit攻击

    从"窃听门"事件解读手机Rootkit攻击 在今年五月讲述了手机流氓软件危害与防治(http://chenguang.blog.51cto.com/350944/557191)文章 ...

  9. BZOJ3514: Codechef MARCH14 GERALD07加强版(LCT,主席树)

    Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M ...

  10. CentOS经常使用文件操作命令[百度博客搬家]

    路径操作的CentOS经常使用命令 如今整理例如以下(百度博客搬家)   cd pwd  NO1. 显示当前路径  [root@rehat root]# pwd  NO2. 返回用户主文件夹  [ro ...