利用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. Webstorm2016激活码[ 转]

    转至:http://blog.csdn.net/tingwode2014_/article/details/51063657 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QT ...

  2. 神经网络环境搭建，windows上安装theano和keras的流程

    今天碰到有朋友问道怎么在windows下安装keras,正好我刚完成搭建,总结下过程,也算是一个教程吧,给有需要的朋友. 步骤一:安装python. 这一步没啥好说的,下载相应的python安装即可, ...

  3. hibernate中session，HQL，持久化，一对多，多对一

    package com.hanqi.test; import java.util.Date; import java.util.List; import org.hibernate.Query; im ...

  4. swift 个人笔记

    swift是现代编程语言的综合体,灵活而强大. //http://www.cocoachina.com/newbie/basic/2014/0604/8675.html //语法var 变量,let ...

  5. MEF 编程指南（七）：使用目录

    目录(Catalogs)   MEF 特性编程模型的核心价值,拥有通过目录动态地发现部件的能力.目录允许应用程序轻松地使用那些通过 Export Attribute 注册自身的导出.下面列出 MEF ...

  6. 基础数据结构 之 栈（python实现）

    栈是编程开发中的两种较为简单的数据结构.栈和队可用于模拟函数的递归.栈的特点是后进先出.其常用操作包括:出栈,入栈等.在出栈前,需判断栈是否为空.在入栈时,需判断栈是否已满. 下面给出一个用pytho ...

  7. hadoop数据[Hadoop] 实际应用场景之 - 阿里

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.明天在这里和大家一起学习一下hadoop数据 Hadoop在淘宝和支付宝的应用从09年开始,用于对海量数据的离线处置,例如对日志的分析,也涉及内 ...

  8. 使用sql生成UUID

    在SQLServer中使用该sql语句可以生成GUID:select cast(NEWID() as varchar(36)) as uuid 通过一下语句将GUID中的'-'字符去掉: select ...

  9. [MEAN Stack] First API -- 7. Using Route Files to Structure Server Side API

    Currently, the server.js is going way too long. In the real world application, it is likely that we ...

  10. Ruby用法总结

    1.ruby中的整数.浮点数.字符串之间的相互转换 ruby的整数.浮点数.字符串的类均提供了to_i,to_f,to_s三个方法,分别用于转换成整数.转换成浮点数.转换成字符串. 2.数组的遍历 例 ...