方案选择:
查阅了一些资料，目前实现实现无刷新上传主要有两种方案，即利用隐藏的iframe来模拟无刷新上传和利用xmlhttp分块上传文件。
这两种方案中，利用隐藏的iframe来模拟无刷新上传用的最为普遍，实现起来也比较容易。而利用xmlhttp分块上传的方式，google
的结果显示用的较少,特别是实用方面，而且代码实现复杂。考虑到要同时实现类似Gmail的附件添加方式，最终选择了利用隐藏的
iframe来模拟无刷新上传的方案。
利用隐藏的iframe来模拟无刷新上传的原理
利用隐藏的iframe来模拟无刷新上传的原理比较简单，在页面中包含一个form和一个iframe，其中ifram设置为不可见，同时将form
的target属性设为iframe的名字，这样当上传的时候，刷新的就是iframe中的页面，而主页面则不会有任何变化。可以在iframe中的
页面中编写上传后客户端要执行的javascript代码，这样可以轻松的实现对主页面的操作。
类Gmail附件添加方式的实现
Gmail的附件添加方式有着比较好的用户体验，原本希望可以通过阅读Gmail的代码来了解Gmail的解决方案，但是发现这个想法有些
不靠谱。所以最终采用自己的方式来解决这个问题并实现了良好的浏览器兼容(IE和Firefox),对于Firefox,是通过利用javascript对DOM的操作，来动
态的创建和删除文件选择框.对于IE，则是结合Javascript,DOM,CSS来实现所要求的效果。在两种浏览器下，均可以进一步扩展，来实现选择后即自动
上传的效果。
DEMO的代码
[code] < HTML> < HEAD> < TITLE> New Document < META NAME="Generator" CONTENT="EditPlus"> < META NAME="Author" CONTENT=""> < META NAME="Keywords" CONTENT=""> < META NAME="Description" CONTENT=""> < script type="text/javascript"> /************************ * author lijun * date 2007.5.25 * * 无刷新上传 * IE,Firefox下和Gmail类似的附件添加方式 * 允许进一步扩展，实现附件添加后即自动上传得功能。 * 2007.5.30修正了一个bug. ************************/ /* 检测浏览器类型 */ function isIE() { if(document.attachEvent) { return true; } else { return false; } } /*firefox下的附件添加提示*/ function getFirefoxTip(form) { var str="添加一个附件"; var cssStr="width:100px;font:12px Arial;color:#00f;text-decoration:underline"; var tipDiv=document.createElement("div"); tipDiv.style.cssText=cssStr; tipDiv.innerHTML=str; tipDiv.onclick=function() { var i=form.getAttribute("count")?form.getAttribute("count"):0; createFirefoxInput(form,parseInt(i)+1); }; return tipDiv; } /*删除已经添加的附件项*/ function removeChild(parent,child,tip) { var i=parent.getAttribute("count"); if(isIE()) { var id=parseInt(child.getAttribute("id")); parent.removeChild(child); parent.removeChild(tip); i--; /* var tipAry=new Array(); var inputAry=new Array(); for(j=0;j
[ BODY>< < iframe> >< iframe form> method="post" enctype="multipart/form-data" action="/upload.do" form="document.forms['uploadForm'];" > BODY HEAD> script> < } initFirefox(); { else initIE(); if(isIE()) init() function *初始化* rePlaceInput(form); window.onresize="function(){" createIeInput(form); var initIE() *初始化IE* tipAry; return inputAry[j].style.left='position.left+"px";' inputAry[j].style.top='position.top+"px";' position="getPosition(tipAry[j]);" for(j="0;j 总结
目前这个DEMO的客户端效果不错，但是还需要实践的检验。有任何问题欢迎交流。[code][/code][code]
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
lkfnn
等级:
性别:
文章: 129
积分: 123
来自: 西安
时间：2007-05-27
代码不能运行,麻烦测一下先.
00请登录后投票
marcian
等级: 初级会员
性别:
文章: 6
积分: 1
来自: 北京
时间：2007-05-31
lkfnn 写道
代码不能运行,麻烦测一下先.
可否说明你不能运行的具体现象？
00请登录后投票
nbzx
等级: 初级会员
性别:
文章: 3
积分: 2
来自: 输入其他...
时间：2007-06-01
这个代码的确不错，不过有两个BUG。
第2行少了个“<”，应该是 第158行，将objobj改为obj。
00请登录后投票
marcian
等级: 初级会员
性别:
文章: 6
积分: 1
来自: 北京
时间：2007-06-01
nbzx 写道
这个代码的确不错，不过有两个BUG。
第2行少了个“<”，应该是 第158行，将objobj改为obj。
这编辑器不好，代码是完整的，但是提交就会有问题。我不知道怎么回事儿。
00请登录后投票
aiut
等级: 初级会员
性别:
文章: 32
积分: 6
来自: 重庆
时间：2007-06-04
昨天刚做了个无刷新上传同时无刷新提交表单.
00请登录后投票
jie_java
等级:
文章: 25
积分: 149
时间：2007-10-31
若把上传附件的这个模块放到页面中的某一个具体位置，该怎么操作呢，比如放到一个table里面来，能否把操作的代码发一下。谢谢。
00请登录后投票
afcn0
等级:
性别:
文章: 471
积分: 190
来自: 天津
时间：2007-10-31
给楼主修改了下,ie隐藏file控件意义不大,使用的是filter在opera有bug,应该使用opacity,firefox也都可以支持的,但是还是不喜欢透明隐藏file控件,给lz修改了下
New Document
发表于 @ 2008年01月11日 10:01:00|评论(loading...)|编辑