发布(推荐)一无刷新上传控件

     本人对于用户体验这方面一直非常关心,开发程序时候总是会从用户角度去设想,以前做过上传方面的工作,比如一个注册流程,它一般都需要录入用户相关信息,姓名,密码什么的,有的时候会用到用户图片,对于没有文件上传的注册流程来说,无非是些数据库的操作,数据写好后点击提交就搞定了,但是如果同时有文件上传,而此时文件上传往往会占用大部分的时间,如果用户上传一张未经优化的数码照片,一般都在2M以上,这样用户点击提交后都会出现长时间的等待,影响用户视觉效果.怎样优化呢?

 

     我的思想是这样的,把上传控件放在第一项,用户最先选择上传文件,此时用无刷新实现,用户选择后即开始上传图片,此时用户可以继续填写余下的相关信息,用户最后提交的时候判断下图片是否已经上传成功,未成功的情况下,禁止提交数据库进行注册操作.这样就在用户填写繁锁信息的同时分担了文件上传的时间,从而直到优化的效果.

 

    而这种无刷新上传的技术,我知道的有两种方法(其它的方法本人还没有尝试过):

 

    第一:通过嵌套iframe的方式来完成.

    第二:利用ajax.net中的updatepannel控件.

 

    现在就第一种方法我说下我的实现过程.第二种就不重点讨论了,应该是没问题的.

 

    嵌套iframe共有两个页面:

 

   1:用来显示上传文件的页面WebForm2.aspx,它的内容非常简单,包含一个iframe,iframe里面的页就是具体的上传页面
     <iframe id="iframe" src ="WebForm3.aspx" ></iframe>

   2:iframe中的内容页WebForm3.aspx

  

<form name="iform" method="post" enctype="multipart/form-data">
                <div id="FUA_myIframe">
                <input id="file" type="file" name="image" onchange="mjFileUpLoad_mjFileUpLoad11upload()" />
      
                </div>                         

            <script language="javascript">

            function mjFileUpLoad_mjFileUpLoad11upload()
            {          
                var action = 'http://localhost:8397/WebForm3.aspx';              
                document.forms[0].action = action;
                setTimeout('document.iform.submit()',1);
            }

            </script></form>

  

   它的内容也比较简单,这里为了说明方便,就不实现具体的上传过程了,如果是用户提交的文件,则显示出文件名称即可.

 

     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的内容页.

   

protected void Page_Load(object sender, EventArgs e)
        {
            //判断是否发生上传控件提交事件
            if (mjFileUpLoad1 .IsPosting)
                this.managePost();
        }
        /**//// <summary>
        /// 保存文件
        /// </summary>
        private void managePost()
        {
            HttpPostedFileAJAX pf = mjFileUpLoad1.PostedFile;
            this .Label1 .Text = mjFileUpLoad1 .SaveAs("~/", pf.FileName);
        }

 

    控件属性IsPosting可以标识是否触发上传事件.只有这种情况下才会触发保存文件事件,否则不会影响原页面的加载 .

 

    在这里放几个截图来供大家参考下:

 

     初始化页面后的效果,这里可上传两个文件:

 

 

    

      当点击添加上传控件后:

 

 

   

      点击浏览后的效果:

 

 

 

     点击删除后的效果:

 

 

      感兴趣的朋友可以去这下载源码:FileUploadAJAX 源网站中提供了这个控件详细的开发文档说明.  源码看起来并不简单,但实现的原理是非常简单的,只不过要懂些js基本知识而已. 也可以看我更改后的源码:更改后的源码

 

      如果大家对于无刷新上传还有特别好的办法,不妨拿出来分享下,最好能够封装成控件.

 

注:

    本文引用:

                http://en.fileuploadajax.subgurim.net