利用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基础控件 - 6.10.4] 项目启动原理 项目中的文件

    A.项目中的常见文件 1.单元测试Test   2.Frameworks(xCode6 创建的SingleView Project没有) 依赖框架   3.Products 打包好的文件   4. p ...

  2. JQuery中的AJAX参数详细介绍

    Jquery中AJAX参数详细介绍 参数名 类型 描述 url String    (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...

  3. oracle ibatis 存储过程 返回游标 嵌套表

    自己解决问题了 问题总结: 1.index by表不能存储在数据库中的type中,故选择嵌套表. 2.ibatis不支持oracle的复合数据类型的返回.(个人理解) 3.替代方案:用返回oracle ...

  4. ssi整合报错org.apache.struts2.convention.ConventionsServiceImpl.determineResultPath(ConventionsServiceImpl.java:100)

    java.lang.RuntimeException: Invalid action class configuration that references an unknown class name ...

  5. sql 调用函数的方法

    USE [ChangHong_612]GO/****** Object: StoredProcedure [dbo].[st_MES_RptInspectWeight] Script Date: 09 ...

  6. jqGrid 学习

    jqGrid 学习: 一.下载需要的jqGrid包:http://www.trirand.com/blog/?page_id=6 二.下载JQuery UI:http://jqueryui.com/d ...

  7. 简谈java的split

    最近都在处理视频音频,今天在合成音频视频时为了给合成的新文件换个新名字,我打算获取了之前的视频名称,用split来分割出不带后缀的名字,再自己加上后缀. 众所周知split可以分割由某种字符分段的St ...

  8. wiki1169-传纸条（dp)

    http://wikioi.com/problem/1169/ 四维数组和三维数组: #include<iostream> #include<cstdio> #include& ...

  9. 【灵感】wifi通过wifi发送优惠信息

    1.[灵感]wifi通过wifi发送优惠信息 http://content.businessvalue.com.cn/post/15362.html 2.手机彩票大爆发 http://content. ...

  10. strutx.xml中配置文件的讲解

    Struts2框架的核心就是struts.xml文件了,该文件主要负责管理Struts的2的业务控制组件的核心内容.为了避免struts.xml的文件国 语庞大和臃肿,我们可以通过把一个struts. ...