为什么使用这两种方法文件上传呢，主要是因为局部刷新问题

上传问题，主要是使用form表单，或者用请求一个文件上传

iframe

大多网站都是有一个整体的固定结构，然后进行局部刷新，我们可以使用AJAX来刷新占位符DIV或者SPAN中的HTML代码的方式去实现。但是HTML片段的编写比整个HTML页面的编写要麻烦。所以许多网站都是使用iframe把整个页面分成几个相对独立的部分，每个部分都是对应一张完整的HTML页面。

下面给出一个例子，是常用的iframe和form的配合使用的方式，很适合在MVC模式的架构下应用，例子非常简单：

主页面：iframe.html

<html>
<head>
<title>ha</title>
</head>
<body> 
<form name="form1"> 
<div>
<iframe name="query" src="test.html"></iframe> 
<iframe name="list"></iframe> 
</div> 
<div> 
<iframe name="theID"></iframe> 
<iframe name="theName"></iframe> 
</div> 
</form> 
</body>

<form name="jumpform" target="theID" action="test.html">
<input type="submit" value="提交">
</form>

</html>

子页面：test.html

<html>
<head>
<title>HELLO</title>
</head>
<body>
BEN Hello!
</body>
</html>

我们看到主页面分成四个独立的块，iframe标签中通过属性src来指定要显示的HTML子页面，这里可以使用Javascript来动态显示。

我们还看到jumpform里面定义了target的值为iframe-theID，这时候，提交该form的时候，返回来的页面就会在theID的iframe中显示了。

target属性： 
_blank ---------- 新开窗口 
_self ----------- 自身 
_top ------------ 主框架 
_parent --------- 父框架 
自定义名字 ----- 出现于框架结构，将会在该名称的框架内打开链接

target这个属性指定所链接的页面在浏览器窗口中的打开方式，它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：

◎_blank，在新浏览器窗口中打开链接文件。

◎_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。

◎_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 
但是我不太理解 
◎_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架

webApi fileReader

https://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/

iframe和ajax文件上传方法的更多相关文章

  1. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  2. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  3. form+iframe实现ajax文件上传

    在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...

  4. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  5. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  6. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  7. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  8. springmvc+ajax文件上传

    环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...

  9. 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

随机推荐

  1. hibernate validator自定义校验注解以及基于服务（服务组）的校验

    hibernate validator是Bean Validation 1.1 (JSR 349) Reference Implementation,其广泛的应用在mvc的参数校验中,尤其是使用服务端 ...

  2. 07：vue定义路由

    1.1 定义路由 1.说明 1. 路由是单页面应用程序(SPA)的关键,Vue提供过来路由插件,使用这个路由就要安装这个插件 2. 安装: npm install vue-router 3. 依赖于v ...

  3. ERROR: unable to bind listening socket for address '127.0.0.1:9000': Address already in use (98) [30-Jan-2018 16:12:27] ERROR: FPM initialization failed解决方法

    1.php启动之后发现访问nginx出现502错误,检查nginx.conf发现指定的php socket不存在 2.解决方法nginx修改陈这样,直接把绿色部门的socket写成本地地址+端口就可以 ...

  4. QWidget设置背景图

    1.使用QSS出现很多问题 2.方法 this->setAutoFillBackground(true); QPalette palette = this->palette(); pale ...

  5. 网络 --- 4 socketserver模块并发 连接合法性

    一.socketserver模块 ②服务端 ③客户端 二.连接合法性       ①os.urandom(n) 一种bytes类型的随机生成n个字节字符串的方法 而且每次生成的值都不相同.再加上md5 ...

  6. mysql的 深度使用 - 游标 , 定时器, 触发器 的使用 ?

    游标 叶叫做 光标; 只能使用在 mysql的 存储过程 或函数中! 游标的概念? 为什么要使用 游标? 什么叫 定时器, 就是事件 event! 是在 mysql 5.0以上的版本中, 才能使用支持 ...

  7. Git 命令收集

    目录 1.清理恢复 2.回滚,reset与revert的区别 3.merge,rebase,cherry-pick区别 4.删除不存在对应远程分支的本地分支 5.git pull,git push 报 ...

  8. Introducing GitFlow

    Introducing GitFlow What Is GitFlow? GitFlow is a branching model for Git, created by Vincent Driess ...

  9. HBase底层存储原理

    HBase底层存储原理——我靠,和cassandra本质上没有区别啊!都是kv 列存储,只是一个是p2p另一个是集中式而已! 首先HBase不同于一般的关系数据库, 它是一个适合于非结构化数据存储的数 ...

  10. Python GIL（Global Interpreter Lock）

    一.介绍 In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native threa ...