无刷新多文件上传(iframe)

最新推荐文章于 2017-11-23 14:42:48 发布

YunanWu

最新推荐文章于 2017-11-23 14:42:48 发布

阅读量828

点赞数

文章标签： iframe IFRAME 上传多文件无刷新

本文链接：https://blog.csdn.net/YunanWu/article/details/8192241

版权

2012-10-21 18:30

昨天和今天一直在做一个无刷新多文件上传功能，现在总算是做好。也算是有点坑爹吧，开始一直想用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" οnclick="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" οnclick="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服务端的操作草草了事....

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

YunanWu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
无刷新多文件上传(iframe)

2012-10-21 18:30 昨天和今天一直在做一个无刷新多文件上传功能，现在总算是做好。也算是有点坑爹吧，开始一直想用AJAX的思路去实现，后面不行又打算借用ASP.NET回调的原理最后还是不行，没想到费了很多时间最后还是徒劳！至于为什么不行网上原因也说了很多，自己了解不深所以浪费了一天的时间去，不过，至少时间也没白费，代码这东西都是"折磨"出来...
复制链接

扫一扫