利用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. [Xcode使用 - 3] 复制Xcode5.1.1中的项目模板到Xcode6.1

         由于Xcode6中精简了许多的项目和文件模板,导致开发非常不方便,所以这里简单介绍了怎么复制旧版本Xcode中的模板到新的Xcode中      这里要复制的是项目模板Empty Appli ...

  2. Educational Codeforces Round 10 D. Nested Segments (树状数组)

    题目链接:http://codeforces.com/problemset/problem/652/D 给你n个不同的区间,L或者R不会出现相同的数字,问你每一个区间包含多少个区间. 我是先把每个区间 ...

  3. SAE搭建WordPress教程 免费建WordPress博客站

    SAE搭建WordPress教程 免费建WordPress博客站 WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设自己的网志.当然,用户也可以 ...

  4. st_Alarm_GenAlarmDealTime

    USE [ChiefmesNew]GO/****** Object: StoredProcedure [dbo].[st_Alarm_GenAlarmDealTime] Script Date: 04 ...

  5. setbuf和freopen

    看memcached代码的时候学习了一个api,setbuf,可以设置文件流的缓冲区.        #include <stdio.h> void setbuf(FILE *stream ...

  6. 解决Linux下zip文件解压乱码问题

    #!/usr/bin/env python # -*- coding: utf-8 -*- import os import sys import zipfile #print "Proce ...

  7. WinFrom界面框架之WeifenLuo.WinFormsUI.Docking + OutLookBar

    本文转载:http://www.cnblogs.com/luomingui/p/3329763.html WeifenLuo.WinFormsUI.Docking + OutLookBar结合使用的效 ...

  8. UVa839 Not so Mobile

      我的解法: 建树,递归判断 #include<cstdio> #include<cstring> #include<iostream> #include< ...

  9. PostgreSQL的 initdb 源代码分析之十二

    继续分析 /* Now create all the text config files */ setup_config(); 将其展开: 实质就是,确定各种参数,分别写入 postgresql.co ...

  10. JQuery Basic Features Quick Walkthrough

    1. Basic Selectors $('p')—Accesses all the paragraph elements in the HTML file $('div')—Accesses all ...