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. View_01_LayoutInflater的原理、使用方法

    View_01_LayoutInflater的原理.使用方法 本篇博客是郭神博客Android视图状态及重绘流程分析,带你一步步深入了解View(一)的读书笔记的笔记. LayoutInflater简 ...

  2. 让JavaScript在Visual Studio 2015中编辑得更easy

    微软公布的Visual Studio 2015展示了该公司对于让该开发工具更好的支持主流的开发语言的工作.微软项目经理Jordan Matthiesen已经具体列出了一些具体处理JavaScript开 ...

  3. Python和C|C++的混编(二):利用Cython进行混编

    还能够使用Cython来实现混编 1 下载Cython.用python setup.py install进行安装 2 一个实例 ① 创建helloworld文件夹 创建helloworld.pyx,内 ...

  4. js29--装饰着模式

    //装饰者模式:就是在保证不改变原有对象的基础上,去扩展一些想要的方法或去求 var CarInterface = new BH.Interface('CarInterface' , ['getPri ...

  5. 7lession-基础数据使用介绍

    1.数值 这个使用比较简单 a = 1 b = 3.2 c = 12.5+4j d = 20L 2.字符串 代码 s = "hello world,i am comming" pr ...

  6. Android之Socket的基于UDP传输

    接收方创建步骤: 1.  创建一个DatagramSocket对象,并指定监听的端口号 DatagramSocket socket = new  DatagramSocket (4567); 2. 创 ...

  7. idea添加自动编译

    话不多说,idea每次修改文件不自动编译到项目里,这里做一下一些操作 registry快捷键ctrl+shift+alt+/

  8. python使用大漠插件进行脚本开发的尝试(一)

    关于游戏脚本是纯然的小白,记一下学习过程遇到的问题.是在win10系统下对PC端的游戏进行脚本编辑,不知道会不会半途放弃. 一.大漠插件 大漠插件在游戏脚本编辑过程中是比较常见的工具,按我理解大致做的 ...

  9. 【例题 7-14 UVA-1602】Lattice Animals

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 借鉴网上的题解的. 思路是. 用"标准化"的思想. 确定基准点(0,0) 然后假设(0,0)是第一个连通块. 然 ...

  10. win7打不开chm格式文件

           近期在开发的过程中,发现重装的系统Wind7 打不开java帮助文档.搜索了半天才找到. 在这里分享一下. 一.假设不能打开,可这样恢复文件关联: 1.開始执行,输入:regsvr32 ...