利用iframe框架完成文件上传

前端页面

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>iframe伪装上传文件</title>

<script type="text/javascript" src="./jquery-2.0.0.min.js"></script>

<script type="text/javascript">

function up(){

	var fname='up'+Math.random();//产生随机name值

	$('<iframe name="'+fname+'" width="0" height="0" frameBorder="0"></iframe>').appendTo($('body'));//创建iframe标签，

	$('form:first').attr('target',fname);//将php返回信息引到这个框架中来，不发生页面跳转

	$('#xinxi').html('正在上传');//上传过程中的显示

	//return false;

}

</script>

</head>

<body>

<h1>iframe模拟Ajax文件上传</h1>

    <h2 id="xinxi"></h2>

    <form action="01.php" method="post" onsubmit="return up();" enctype="multipart/form-data">

        <p><input type="file" name="pic" /></p>

        <p><input type="submit" value="上传"/></p>

    </form>

</body>

</html>

01.php

<?php

if(empty($_FILES)){

    echo 'no file';

}

sleep(2);

$error=$_FILES['pic']['error']==0?'succ':'fail';

echo "<script>parent.document.getElementById('xinxi').innerHTML='$error'</script>";

?>

页面效果

iframe仿Ajax上传文件的更多相关文章

  1. 用iFrame模拟Ajax上传文件

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

  2. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  3. 前端 - jquery方式 / iframe +form 方式 上传文件

    环境与上一章一样 jquery 方式上传文件: HTML代码 {#html代码开始#} <input type="file" id="img" > ...

  4. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  5. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  6. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  7. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  8. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  9. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

随机推荐

  1. [iOS 多线程 & 网络 - 4.0] - AFN框架简单使用

    A.AFN基本知识 1.概念 AFNetworking 是对NSURLConnection的封装 运行效率没有ASI高(因为ASI基于CFNetwork),但是使用简单 AFN支持ARC     B. ...

  2. ASP.Net自定义重写Http Server标头

    Net中我们为了安全或其他原因起见 可能需要修改我们的标头报文等 以下方法我们通过使用HTTP Module来使用编程的方式来去除或修改它 首先我们自定义一个类CustomServerHeaderMo ...

  3. MyGeneration模板生成NHibernate映射文件和关系(one-to-one,one-to-many,many-to-many)

    MyGeneration的几个NHibernate模板功能已经很强,但还是存在些问题.例如:Guid主键支持不佳,代码不易修改,不支持中文注释等等.所以我决定自己来改写此模版.我把一部分通用的函数提取 ...

  4. Velocity中#set指令

    引用可以让模板设计者生成动态内容,而指令允许设计者真正的负责页面的展现和内容. 指令是以#开头,后面紧跟一个关键字,比如if,else,foreach等.而这个关键字,是可以被放在{}中间的.这是规范 ...

  5. [C#] Control.Invoke方法和跨线程访问控件

    在设计界面时,我们经常需要将一些需要时间才能完成的操作放在另一个线程(不同于UI主线程)中执行.但是这些操作可能需要将其结果或完成情况通知主线程,比如调用窗体的方法,或者触发事件(由界面响应事件),很 ...

  6. stl lower_bound upper_bound binary_search equal_range

    自己按照stl实现了一个:   http://www.cplusplus.com/reference/algorithm/binary_search/ 这里有个注释,如何判断两个元素相同: Two e ...

  7. Spark1.0.0新特性

            Spark1.0.0 release于2014-05-30日正式公布,标志Spark正式进入1.X的时代.Spark1.0.0带来了各种新的特性,并提供了更好的API支持:Spark1 ...

  8. 在Mac OS X 10.9上安装nginx

    1. 安装PCRE Download latest PCRE. After download go to download directory from terminal. $ cd ~/Downlo ...

  9. 整数矩阵CMO 2102回馈(gauss整数解)

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 本题是CMO(数学 Olympics) 2012 第二题 所以还是很坑的…… ...

  10. mysql 5.7.12 新增 X plugin 详解

     https://dev.mysql.com/doc/refman/5.7/en/document-store.html   原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息 ...