使用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 校验中国身份证号码实例详解
Apr 11 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
javascript获取web应用根目录的方法
2014/02/12 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
windows下ipython的安装与使用详解
2016/10/20 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
浅析python 字典嵌套
2020/09/29 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
HR求职自荐信范文
2014/06/21 职场文书
会计学专业求职信
2014/07/17 职场文书
给老婆的道歉信
2015/01/20 职场文书
朋友离别感言
2015/08/04 职场文书
在Django中使用MQTT的方法
2021/05/10 Python