公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程纯javascript异步上传文件原理

纯javascript异步上传文件原理

更新时间:2013-05-25 23:29:19 |

所谓的AJAX异步上传附件,以目前(2013-05-01以前)的知识来说不准确,以后是否存在我不清楚。javascript没有直接提供ajax上传附件的接口,目前大部分的异步上传控件是FLASH来实现。其实在ajax技术出现之前,javascript就可以实现异步上传文件了。google这方面确实比较超前,这里就不细谈,有兴趣了解历史的朋友可以网上查阅相关资料。

标签的target属性很重要

我们制作框架类的网页时一般的结构:

  • 顶部、左侧导航 然后中间为主体内容
  • 少量网站使用frameset框架结构(主要不利于搜索优化,这种结构常见于网站后台)
  • 少量的网站使用左侧导航,主体内容部分使用iframe

可能有些初学朋友没有见过第三种情况,其实是靠A标签的 target属性来实现的。一般常用的target属性含义:_blank新窗口打开链接,_self本页打开链接,_top整页打开链接,_top父窗口打开链接;还有一种使用稍微少的是框架中打开。例如:<a target="myiframe" href="http://www.goodxyx.com/">...</a> 在name=myiframe的框架中打开链接,框架可以是iframe,也可以是frameset,但是必须存在对应的name属性,并且值为myiframe。

介绍这么多关于A标签的target属性功能,其实FROM的target属性功能也一样,了解target属性,那么下面我们就具体介绍javascript是如何异步上传文件。

  • 动态创建一个隐藏的iframe,设置一个唯一的name值
  • 给iframe一个onload事件用于表单提交后回调,然后把该iframe删除
  • 动态创建一个FORM表单,把表单的target属性的值设置为iframe的name值
  • FROM表单的src属性值就是文件上传到的地址
  • FORM表单中创建一个<input type="file" />的文件域
  • 给文件域一个onchange事件,使得表单自动提交

注意事项

1. form表单必须存在enctype="multipart/form-data"属性,对于初学HTML的朋友,老是出现文件域内容无法提交到服务器后台,其实就是form表单少了该属性。

2. iframe绑定的onload事件会被调用两次,创建的时候和FORM表单提交的时候,要注意处理。

相关实例

比较完善的插件如:本站原创的czyx.uploadReplace插件

javascript异步上传文件演示地址

 

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号