发布(推荐)一无刷新上传控件
本人对于用户体验这方面一直非常关心,开发程序时候总是会从用户角度去设想,以前做过上传方面的工作,比如一个注册流程,它一般都需要录入用户相关信息,姓名,密码什么的,有的时候会用到用户图片,对于没有文件上传的注册流程来说,无非是些数据库的操作,数据写好后点击提交就搞定了,但是如果同时有文件上传,而此时文件上传往往会占用大部分的时间,如果用户上传一张未经优化的数码照片,一般都在2M以上,这样用户点击提交后都会出现长时间的等待,影响用户视觉效果.怎样优化呢?
我的思想是这样的,把上传控件放在第一项,用户最先选择上传文件,此时用无刷新实现,用户选择后即开始上传图片,此时用户可以继续填写余下的相关信息,用户最后提交的时候判断下图片是否已经上传成功,未成功的情况下,禁止提交数据库进行注册操作.这样就在用户填写繁锁信息的同时分担了文件上传的时间,从而直到优化的效果.
而这种无刷新上传的技术,我知道的有两种方法(其它的方法本人还没有尝试过):
第一:通过嵌套iframe的方式来完成.
第二:利用ajax.net中的updatepannel控件.
现在就第一种方法我说下我的实现过程.第二种就不重点讨论了,应该是没问题的.
嵌套iframe共有两个页面:
1:用来显示上传文件的页面WebForm2.aspx,它的内容非常简单,包含一个iframe,iframe里面的页就是具体的上传页面
<iframe id="iframe" src ="WebForm3.aspx" ></iframe>
2:iframe中的内容页WebForm3.aspx
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
它的内容也比较简单,这里为了说明方便,就不实现具体的上传过程了,如果是用户提交的文件,则显示出文件名称即可.
if (Request.Files.Count>0)
{
Response.Write(Request.Files[0].FileName.ToString());
}
这个内容页主要包含了一个html的上传控件,它有一个onchange事件,当事件触发后,重载页面内容,完成显示文件名的过程(无刷新上传).内容页刷新了,但是对于用户来说是看不出来的.而且内容页在完成文件上传的同时,用户就可以填写其它相关信息了,起到了一个同步的作用.
这种实现方法有优点也有缺点:
优点:用户体验提高了,节约了等待时间.
缺点:需要开发额外的上传页面即内容页.
其实这个方案是否值得采用关键看具体的项目环境,如果用户传的图片小那也就没太大的价值.上面的例子只是为了说明基于iframe实现无刷新功能的原理,比较简单,但要想实现这种无刷新功能的封装,并非如果简单,不过都是同样的原理.
某次在一开源网站中看到了FileUploadAJAX 控件,它把一个无刷新上传的功能封装成一个控件,调用非常方便,而且功能也特别多,且非常具有实用性,本人根据源码重新封装了下,并没有增加功能,只是觉的源码注释太少,看起来有点费劲.
此控件支持如下功能:
1:多文件上传.
2:可以配置最大上传文件个数.
3.自定义js脚本.
4.支持删除已经上传的文件.
5.支持无刷新上传效果(iframe).
6.可配置相关提示文本
此控件是基于iframe方式实现的无刷新,开发人员并不需要开发iframe中的内容页,控件采用当前页来充当iframe的内容页.
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
控件属性IsPosting可以标识是否触发上传事件.只有这种情况下才会触发保存文件事件,否则不会影响原页面的加载 .
在这里放几个截图来供大家参考下:
初始化页面后的效果,这里可上传两个文件:
当点击添加上传控件后:
点击浏览后的效果:
点击删除后的效果:
感兴趣的朋友可以去这下载源码:FileUploadAJAX 源网站中提供了这个控件详细的开发文档说明. 源码看起来并不简单,但实现的原理是非常简单的,只不过要懂些js基本知识而已. 也可以看我更改后的源码:更改后的源码
如果大家对于无刷新上传还有特别好的办法,不妨拿出来分享下,最好能够封装成控件.
注:
本文引用:
http://en.fileuploadajax.subgurim.net