无刷新多文件上传(iframe)

                 昨天和今天一直在做一个无刷新多文件上传功能,现在总算是做好。也算是有点坑爹吧,开始一直想用AJAX的思路去实现,后面不行又打算借用ASP.NET回调的原理最后还是不行,没想到费了很多时间最后还是徒劳!至于为什么不行网上原因也说了很多,自己了解不深所以浪费了一天的时间去,不过,至少时间也没白费,代码这东西都是"折磨"出来....本来是想到了借助一个隐藏IFRAME实现,不过界面虽然没有刷新,不过每次都界面都闪一下,自己看起来有点不想,所以就一直琢磨没想到还是没戏,不过用SWFUpload也可以实现无刷新上传,至于SWFUpload之后在琢磨吧,先把这个给结了...

 

下面是主要代码:

HTML部分就是一个隐藏IFRAME,FORM以及INPUT了,以及一堆JS了。。

这是BODY部分:

<body> 

    <form id="form1" runat="server"> 

    <div> 

        <input type="text" id="txt" /> 

        <input type="button" onclick="add();" value="添加一个文件" id="AddFile" /> 

        <div style="margin-top: 5px"> 

            文件列表: 

            <br /> 

            <div id="uploadFileDiv" style="border:1px solid gray; width:600px"> 

                文件1:<input type="file" style="width: 500px" id="files0" name="files" /> 

            </div> 

            <input type="button" id="uploadButton" onclick="uploadFile();" value="上传" /> 

            <span id="uploadMessage" style="color: Red;"></span> 

        </div> 

        <div id="processDiv" style="display:none; color: #660066;"> 

            <img alt="" src="014.gif" id="loading" />文件上传中... 

        </div> 

    </div> 

    </form> 

  

    <div style="display:none"> 

        <iframe name="uploadResponse"></iframe> 

        <!--带当前时间防止因为缓存不填交数据-->

        <form id="uploadForm" action="UploadFile.ashx?temp=<%= DateTime.Now.Ticks %>" target="uploadResponse" 

        method="post" enctype="multipart/form-data"> 

        </form> 

    </div> 

</body> 

 

关键的JS/JQuery代码:

    

<script src="script/jquery-1.4.1.js" type="text/javascript"></script> 

    <script src="script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

        function uploadFile() { 

            var id = null; 

            $("#processDiv").css("display", "block"); 

            $("#uploadFileDiv input[type='file']").each(function () { 

                $("#uploadForm").append($(this)); 

                uploadFile(); 

  

            }); 

            $("#uploadForm").submit(); 

        } 

        function uploadFileResponse(response) { 

            $("#processDiv").css("display", "none");//主要用于显示上传进度... 

            window.eval("var rs=" + response); 

            $("#uploadMessage").html(rs.message); 

            //还原界面 

            $("#uploadFileDiv").html(""); 

            $("#uploadForm input[type='file']").each(function (i) { 

                // 

                $("#uploadFileDiv").append("文件"+(i+1)+":"); 

                $("#uploadFileDiv").append($(this)); 

                $("#uploadFileDiv").append("<br/>"); 

            }); 

  

        } 

  

        var index = 1; 

        function add() { 

            var htmltext = '<br/>文件'+(index+1)+':<input type="file" style="width:500px" id="imageFile' + index + '"  name="imageFile" />'; 

            $("#uploadFileDiv").append(htmltext); 

            index++; 

        }    

    </script>

 

最后就是隐藏IFRAME提交表单的最终位置代码了(这种方法不管是APS.NET,JSP或者是PHP都可以用,因为最后提交的位置用什么语言就只是接收并保存文件的代码了)...

 

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Web; 

using System.Web.UI; 

using System.IO; 

  

  

    /// <summary> 

    /// UploadImage1 的摘要说明 

    /// </summary> 

    public class UploadIFile : IHttpHandler 

    { 

        HttpContext context = null; 

        public void ProcessRequest(HttpContext context) 

        { 

            this.context = context; 

            //这句话主要是不想让客户端缓存服务器的网页文件。 

            context.Response.Cache.SetCacheability(HttpCacheability.NoCache); 

            int status = 0;//状态 

            string message = "";//输出信息 

            string errorFile=""; 

            if (context.Request.Files.Count == 0) 

            { 

                status = 1; 

                message = "请先选择要上传的文件.."; 

                RenderUploadScript(status, message); 

            } 

            for (int i = 0; i < context.Request.Files.Count; i++) 

            { 

                string ext = Path.GetExtension(context.Request.Files[i].FileName).ToLower(); 

                if (ext == ".exe") 

                { 

                    status = 2; 

                    message = "不能上传可执行文件到服务器..."; 

                    RenderUploadScript(status, message); 

                } 

                Guid fileID = Guid.NewGuid(); 

                string fileName = context.Server.MapPath(String.Format("~\\Files\\{0}" + ext, fileID)); 

                if (context.Request.Files[i].ContentLength == 0) 

                { 

                    status = 3; 

                    errorFile+=(i+1)+","; 

                    //RenderUploadScript(status, message); 

                } 

                context.Request.Files[i].SaveAs(fileName); 

  

            } 

           message = "文件上传成功.."; 

             

            if(status==3) 

              message="您上传的文件"+errorFile+"为0字节的文件,该类文件无上传!";            

            RenderUploadScript(status, message); 

  

        } 

        //动态向客户端输出脚本,其实也就是显示处理结果 

        private void RenderUploadScript(int status, string mess) 

        { 

            string script=string.Format("<script language='javascript'> window.parent.uploadFileResponse(\"{{ status:{0},message:'{1}'}}\"); </script>", status, mess); 

            context.Response.Write(script); 

            context.Response.End(); 

  

        } 

        public bool IsReusable 

        { 

            get

            { 

                return false; 

            } 

        } 

    }

 

ASP.NET服务端的操作草草了事....

 

 

 

 

能力不足,有错之处,万望指出,如有更好的实现方法,感谢共享...

 

本文从百度空间搬家到博客园。。

你可能感兴趣的:(iframe)