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

网址：www.zixue.it

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="http://linux.zixue.it/images/loading.gif" 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上传效果的更多相关文章

  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. JVM调优总结（四）-垃圾回收面临的问题

    如何区分垃圾 上面说到的“引用计数”法,通过统计控制生成对象和删除对象时的引用数来判断.垃圾回收程序收集计数为0的对象即可.但是这种方法无法解决循环引用.所以,后来实现的垃圾判断算法中,都是从程序运行 ...

  2. Swift - 如何实现字符串的HMAC_SHA1加密

    前段时间有个网友问是否有Swift的HMAC_SHA1算法.这次就专门写篇相关文章进行介绍.要说明HMAC-SHA1,首先要先了解什么是HMAC,什么是SHA. 1,HMAC(散列消息身份验证码:Ha ...

  3. Python 中的类的相关操作

    构造函数 构造函数是任何类都有的特殊方法.当要创建一个类时,就要调用构造函数.他的名字是__init__.init的前后分别是两个下划线.时间类Time的构造函数如下: >>> cl ...

  4. Windows Azure入门教学系列 (九)：Windows Azure 诊断功能

    本文是Windows Azure入门教学的第九篇文章. 本文将会介绍如何使用Windows Azure 诊断功能.跟部署在本地服务器上的程序不同,当我们的程序发布到云端之后,我们不能使用通常的调试方法 ...

  5. Unknown database 'DB_NAME'

    Cannot create PoolableConnectionFactory (Unknown database 'DB_NAME'): com.mysql.jdbc.exceptions.jdbc ...

  6. MyEclipse-6.5注冊码生成器源代码

    打开MyEclipse新建一个Javaproject,然后新建类,粘贴例如以下代码,就可以生成MyEclipse的注冊码 import java.io.BufferedReader; import j ...

  7. [置顶] 单键模式的C++描述

    设计模式-单键(Signelton):其实单键的设计模式说来很简单,说的直白一点就是程序运行过程中保证只有一个实例在运行而已.在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例, ...

  8. Monkey 命令使用说明

    1.  命令使用 Monkey是一个命令列工具 ,可以运行在仿真器里或实际设备中.它向系统发送伪随机的使用者事件流,实现对正在开发的应用程序进行压力测试.Monkey包括许多选项,它们大致分为四大类: ...

  9. Html.Partial("")与Html.RenderPartial("")区别

    文章有点长,但大多是代码,看看很快的,不要压力太大.网上有很多关于这两个方法的区别,都说出了它本质的区别(不看代码,只看这个结论,就已经足够了,如果觉得有必要从代码中得出这个结论,那就继续往下看),这 ...

  10. Enterprise Solution 企业管理软件开发框架

    Enterprise Solution 开源项目资源汇总 Visual Studio Online 源代码托管 企业管理软件开发框架 Enterprise Solution 是一套管理软件开发框架,在 ...