使用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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现上传图片功能
Jun 29 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 print EOF实现方法
2009/05/21 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
js常用函数 不错
2006/09/08 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Puppet的一些技巧
2018/09/17 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python注释详解
2016/06/01 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
食品安全工作实施方案
2014/03/26 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
PHP设计模式(观察者模式)
2021/07/07 PHP