使用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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery Fade用法详解
Nov 06 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
请php正则走开
2008/03/15 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js实现日历与定时器
2017/02/22 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python使用Tesseract库识别验证
2018/03/21 Python
python简单实现9宫格图片实例
2020/09/03 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
离职感谢信
2015/01/21 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
导游词之神仙居景区
2019/11/15 职场文书