无刷新多文件上传(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服务端的操作草草了事....

 

 

 

 

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

 

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

posted @ 2012-10-22 02:30  提灯寻影~  阅读(183)  评论(0)  编辑  收藏  举报