以下是自学it网--中级班上课笔记

网址：www.zixue.it

html页面

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  3. <head>
  4. <title>利用jquery+iframe做一个ajax上传效果</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
  9. <script type="text/javascript">
  10. // 利用 jquery+iframe 做一个ajax上传效果
  11.  
  12. /*
  13. 思路:
  14. 1: 点击"提交"时的瞬间,生成一个iframe对象,插入body中
  15. 2: 修改form的target ,为iframe的name值
  16. 3: 给iframe加1个事件 ,onload
  17. */
  18.  
  19. $(
  20.     function() {
  21.         $('input:button').click(function(){
  22.             //alert('s');
  23.             var ifmname = 'ifm' + Math.random();
  24.             var ifm = $('<iframe width="0" height="0" frameborder="0" name="'+ ifmname +'">');
  25.             ifm.appendTo($('body'));
  26.  
  27.             $('form').attr('target',ifmname);
  28.             $('form').submit();
  29.  
  30.             $('#progress').html('<img src="http://linux.zixue.it/images/loading.gif" border="0">');
  31.             ifm.load(function(){
  32.                 $('#progress').html('上传完毕');
  33.                 this.remove();
  34.             });
  35.  
  36.         });
  37.     }
  38. );
  39.  
  40. </script>
  41. <style type="text/css">
  42. </style>
  43. </head>
  44.     <body>
  45.         <div id="progress"></div>
  46.         <form action="upfile.php" method="post" enctype="multipart/form-data" target="upfile">
  47.             <input type="file" name="pic" /><br />
  48.             <input type="button" value="提交" />
  49.         </form>
  50.     </body>
  51. </html>

upfile.php

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

利用jquery+iframe做一个ajax上传效果的更多相关文章

  1. 利用Bootstrap简单实现一个文件上传进度条

    © 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...

  2. 在jquery中，使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

  3. VUE2.0+VUE-Router做一个图片上传预览的组件

    之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...

  4. 简单的做一个图片上传预览（web前端）

    转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...

  5. 在asp.net利用jquery.MultiFile实现多文件上传（转载）

    转载地址:http://www.cnblogs.com/scy251147/archive/2010/09/30/1839313.html 官网链接:http://www.fyneworks.com/ ...

  6. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  7. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  8. 用iFrame模拟Ajax上传文件

    前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...

  9. [转]一个文件上传的jquery插件

    http://www.jb51.net/article/51547.htm 这篇文章主要介绍了使用ajaxfileupload.js实现ajax上传文件php版,需要的朋友可以参考下     无论是P ...

随机推荐

  1. Linux C++ 开发简介（包括Linux守护线程）

    阅读目录 简介 操作系统 编辑器 编译器 构建系统 调试 IDE 可执行程序.动态库.静态库 服务 Windows服务简介 创建Windows服务 注册Windows服务 管理Windows服务 Li ...

  2. 浅谈PPM (Project Portfolio Management) - 1

    前言: 本文以纯理论性的PPM解说为主,不会涉及到具体怎样实施,我会在以后介绍具体的PPM实施方案介绍. PPM,可能非常多人并不清楚甚至可能没听说过,这是一个近些年才流行起来的概念,是Project ...

  3. 在Web Api中快速实现JSonp

    本文翻译自:http://www.codeproject.com/Tips/631685/JSONP-in-ASP-NET-Web-API-Quick-Get-Started Concept: 同源策 ...

  4. use EXPORT和use EXPORT_OK

    我不明白 use EXPORT和use EXPORT_OK的区别,大多数资料提到了一些: @Export 允许 导出模块的函数和变量到用户的名字空间使用标准的导入方法. 这种方式,我们不需要创建模块的 ...

  5. Java获取随机数的几种方法

    Java获取随机数的几种方法 .使用org.apache.commons.lang.RandomStringUtils.randomAlphanumeric()取数字字母随机10位; //取得一个3位 ...

  6. __sleep和__wakeup

    魔术方法__sleep和__wakeup 串行化serialize可以把变量包括对象,转化成连续bytes数据. 你可以将串行化后的变量存在一个文件里或在网络上传输. 然后再反串行化还原为原来的数据. ...

  7. 第12届北师大校赛热身赛第二场 B起床的烦恼

    题目链接:http://www.bnuoj.com/bnuoj/contest_show.php? cid=3570#problem/43572 题目大意: Nono从一開始数数,他每数一个数时会计算 ...

  8. Windows Azure入门教学系列 (八)：使用Windows Azure Drive

    我们知道,由于云端的特殊性,通常情况下,对文件系统的读写建议使用Blob Storage来代替.这就产生了一个问题:对于一个已经写好的本地应用程序,其中使用了NTFS API对本地文件系统读写的代码是 ...

  9. Codeforces Round #311 (Div. 2)

    我仅仅想说还好我没有放弃,还好我坚持下来了. 最终变成蓝名了,或许这对非常多人来说并不算什么.可是对于一个打了这么多场才好不easy加分的人来说,我真的有点激动. 心脏的难受或许有点是由于晚上做题时太 ...

  10. oracle至mysql该指南的数据模式（）任意数据源之间的跨导应用

    为了产生的一些资源的库的释放.需要API模块迁移到mysql在,需要引导数据. 试用oracle to mysql工具.当迁移错误不说,如此大量的数据的,有了这样简陋的工具是不太可靠. 意外的发现工具 ...