使用jquery+iframe做一个ajax上传效果(实例)


Posted in jQuery onAugust 24, 2017

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>利用jquery+iframe做一个ajax上传效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// 利用 jquery+iframe 做一个ajax上传效果

/*
思路:
1: 点击"提交"时的瞬间,生成一个iframe对象,插入body中
2: 修改form的target ,为iframe的name值
3: 给iframe加1个事件 ,onload
*/

$(
 function() {
  $('input:button').click(function(){
   //alert('s');
   var ifmname = 'ifm' + Math.random();
   var ifm = $('<iframe width="0" height="0" frameborder="0" name="'+ ifmname +'">');
   ifm.appendTo($('body'));

   $('form').attr('target',ifmname);
   $('form').submit();

   $('#progress').html('<img src="<img src="//img.jbzj.com/file_images/article/201708/loading.gif" alt="" />" border="0">');
   ifm.load(function(){
    $('#progress').html('上传完毕');
    this.remove();
   });

  }); 
 }
);


</script>
<style type="text/css">
</style>
</head>
 <body>
  <div id="progress"></div>
  <form action="upfile.php" method="post" enctype="multipart/form-data" target="upfile">
   <input type="file" name="pic" /><br />
   <input type="button" value="提交" />
  </form>  
 </body>
</html>

upfile.php

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

以上这篇使用jquery+iframe做一个ajax上传效果(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
jQuery Position方法使用和兼容性
Aug 23 #jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
js中reverse函数的用法详解
2013/12/26 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
中专生自我鉴定
2013/12/17 职场文书
给老师的检讨书
2014/02/11 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年高中语文教学总结
2015/08/18 职场文书