iframe和ajax文件上传方法
为什么使用这两种方法文件上传呢，主要是因为局部刷新问题
上传问题，主要是使用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文件上传方法的更多相关文章
- iframe实现Ajax文件上传效果示例
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...
- iframe 模拟ajax文件上传and formdata ajax 文件上传
对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe 的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...
- form+iframe实现ajax文件上传
在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- AJAX文件上传实践与分析，带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- springmvc+ajax文件上传
环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
随机推荐
- 从技术专家到管理者的思路转变（V1）
作为技术专家出身的管理者,是一种优势(你所做的很多决策可能比非技术出身的管理者更加具有可行性和性价比).也是一种劣势(你可能会过于自恋自己的技术优势).这取决于你在接下去的职业生涯中,如何取舍你的技术 ...
- Oracle redo/undo 原理理解
一. 什么是redo(用于重做数据) redo也就是重做日志文件(redo log file),Oracle维护着两类重做日志文件:在线(online)重做日志文件和归档(archived)重做日志文 ...
- vue.js not detected 解决办法-vue.js devtools 安装
国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...
- Codeforces Round #425 (Div. 2) Problem D Misha, Grisha and Underground (Codeforces 832D) - 树链剖分 - 树状数组
Misha and Grisha are funny boys, so they like to use new underground. The underground has n stations ...
- python使用pip下载模块
举例下载串口模块pyserial: 下载安装了python之后,打开cmd,在python的安装目录里,搜索pip,把pip3.7.exe拖进cmd,然后输入pip3.7.exe install py ...
- 纯注解方式配置spring+springMVC
1.新建类initConfig,继承AbstractAnnotationConfigDispatcherServletInitializer,并重写getRootConfigClasses().get ...
- 呼叫中心获取sip数据报文
1.下载sngrep并且安装: 运行 ./sngrep 进入呼叫列表,空格选中呼叫流,进入 2.呼叫信息 回车进入原始窗口 空格选中两条消息流,回车进入消息差异窗口 F8设置
- git如何将一个分支合并到另一个分支?
答: git merge --no-edit <another branch>
- linux内核中侧async_tx是什么?
答: 异步内存传输api(asynchronous memory transfer/transform API),这是一种api,用来为应用提供操作DMA的API. 下图是async_tx在架构中所处 ...
- centos远程访问
centos远程访问即windows下的mysql和linux下的mysql能连接,即windows下的navicat能连接到(访问)centos下的mysql中的库表 (centos是linux的一 ...