Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件

上传文件算是比较常规的一个功能，Asp.Net自带了一个上传控件 FileUpload ，简单易用但是体验不太好，所有开发者经常都会选择一个JS插件来进行上传,比如：Uploadify   SWFupload  等等...

如果没有特别高的要求，也可以自已实现无刷新有等待效果的上传...

目录

 

 

知识了解

  • 利用jQuery Form Plugin的ajaxSubmit方法通过AJAX提交表单

   表单提交后，在一般处理程序中HttpContext.Current.Request.Files才能获取客户端上传文件集合 

   http://www.malsup.com/jquery/form/#api

   提交表单，上传时，等待效果可以在beforeSubmit回调函数中显示

   http://www.malsup.com/jquery/form/#options-object

 

  • 想要在HttpContext.Current.Request.Files中获取客户端上传文件集合

    那么还要需要设置form的enctype属性，enctype默认为：application/x-www-form-urlencoded,

    但是表单中含有上传控件时，enctype属性必须使用：multipart/form-dat，否则得到不客户端上传文件集合。

值 描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

    更多相关：

    http://www.w3school.com.cn/tags/att_form_enctype.asp

    http://msdn.microsoft.com/zh-cn/library/system.web.httprequest.files(v=VS.80).aspx

 

  • Asp.Net为了防止服务器攻击，对上传文件大小进行限制

   默认大小为4096K，也就是4M; 如果大小超过限制会引发一个 ConfigurationErrorsException 异常; 对于图片上传来说4M基本能满足，但是对于文件上传来说，4M的最大上传限制明显不够;

   这样就需自定义最大上传限制，我们可以通过修改Web.config文件中的httRuntime元素中的maxRequestLength元素

<system.web>
    <httpRuntime maxRequestLength="2097151" executionTimeout="3600"/>
</system.web>

   maxRequestLength元素虽然可以自定义设置，但是最大也不能超过2097151KB（最大不能大于2G）

   可以看到还设置了executionTimeout元素， executionTimeout元素表示请求允许被执行的秒数，默认为110秒（.Net Framework1.1 时默认为：90秒）;

   当上传文件越大，执行请求的时间也就越长，所以根据设置的maxRequestLengtht适当的调整executionTimeout元素的值（单位为：秒）。

   更多httRuntime 相关：

   http://msdn.microsoft.com/zh-cn/library/e1f13641(v=vs.90).aspx

 

前后端实现代码

    .aspx页中代码

点击展开查看源码 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileUploadSample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Porschev--Asp.Net 使用Jquery和一般处理程序实现无刷新上传大文件</title>
    <link href="!css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
    <div class="carea">
        <div class="ui-tabs-panel">
            <div class="search_head">
                <h3 class="sh_title">
                    Porschev--Asp.Net 使用Jquery和一般处理程序实现无刷新上传大文件</h3>
            </div>
            <ul class="info_input">
                <li><b>选择文件：</b>
                    <div class="ii_conarea">
                        <input id="fulFile" name="fulFile" type="file" class="ful" />
                        <img id="imgUploading" src="!images/uploading.gif" alt="正在上传..." class="loading_img none" />
                    </div>
                </li>
            </ul>
            <input id="btnSubmit" type="button" value="上传" class="btn_sub" />
        </div>
    </div>
    </form>
</body>
</html>

<script src="!js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="!js/jquery.form.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $("#btnSubmit").click(function() {
            if ($("[id$='fulFile']").val() == "") {
                alert("请选择要上传的文件!");
                return false;
            }

            $("[id$='form1']").ajaxSubmit({
                url: "Handler/UploadHandler.ashx",
                type: "post",
                dataType: "text",
                resetForm: "true",
                beforeSubmit: function() {
                    $("[id$='fulFile']").hide();
                    $("[id$='imgUploading']").show();
                    $("[id$='btnSubmit']").hide();
                },
                success: function(msg) {
                    $("[id$='fulFile']").show();
                    $("[id$='imgUploading']").hide();
                    $("[id$='btnSubmit']").show();
                    if (msg == "1") {
                        alert("上传成功!");
                    }
                    else if (msg == "-2") {
                        alert("禁止上传 0 KB大小的文件!");
                    }
                    else if (msg == "-1") {
                        alert("请选择要上传的文件!");
                    }
                    else if (msg == "-0") {
                        alert("上传失败!");
                    }
                    return false;
                },
                error: function(jqXHR, errorMsg, errorThrown) {
                    $("[id$='fulFile']").show();
                    $("[id$='imgUploading']").hide();
                    $("[id$='btnSubmit']").show();
                    alert("错误信息:" + errorMsg);
                    return false;
                }
            });
        });
    });
</script>

 

   一般处理程序中代码

点击展开查看源码 
using System;
using System.IO;
using System.Web;
using System.Web.Services;

namespace FileUploadSample.Handler
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class UploadHandler : IHttpHandler
    {
        /// <summary>
        /// 上传文件夹
        /// </summary>
        private  const string UPLOAD_FOLDER = "~/UploadFile/";

        public void ProcessRequest(HttpContext context)
        {
            int resultVal = (int)ReturnVal.Failed;
            try
            {
                HttpPostedFile myFile = context.Request.Files["fulFile"];  

                if (myFile != null)
                {
                    if (myFile.InputStream.Length != 0)
                    {
                        string originalFileName = Path.GetFileName(myFile.FileName);     //原文件名                        
                        string newFileName = string.Format("{0}_{1}", Guid.NewGuid(), originalFileName);   //新文件名---组成形式：  GUID + 下划线 + 原文件名
                        string fileAbsPath = context.Server.MapPath(UPLOAD_FOLDER) + newFileName;   //绝对路径

                        myFile.SaveAs(fileAbsPath);

                        resultVal = (int)ReturnVal.Succeed;
                    }
                    else
                    {
                        resultVal = (int)ReturnVal.FileEmpty;
                    }
                }
                else
                {
                    resultVal = (int)ReturnVal.NotSelected;
                }
            }
            catch (Exception)
            {
                resultVal = (int)ReturnVal.Failed;
            }
            finally
            {
                context.Response.Write(resultVal);
            }
        }

        #region## 返回值
        /// <summary>
        /// 返回值
        /// </summary>
        private enum ReturnVal : int
        {
            /// <summary>
            /// 不能上传 0 K大小的文件
            /// </summary>
            FileEmpty = -2,

            /// <summary>
            /// 未选中文件
            /// </summary>
            NotSelected = -1,

            /// <summary>
            /// 上传失败
            /// </summary>
            Failed = 0,

            /// <summary>
            /// 成功
            /// </summary>
            Succeed = 1

        }
        #endregion
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

实现截图

 

 

 

常见问题
  • 无法获取客户端上传的文件，一般有三种情况       
    1. 页面上没有 type="file" 标签　 
    2. form的enctype属性未设置成multipart/form-data
    3. 提交方法有问题，请注意JS源码中提交表单的ajaxSubmit方法   (Jquery.form.js 需要依赖于jquery.js)

 

源码下载

 示例下载：https://files.cnblogs.com/zhongweiv/FileUploadSample.zip

 示例代码Target Framework为：.NET Framework3.5^_^!

 

 

posted @ 2013-04-16 09:37  porschev  阅读(6659)  评论(27)  编辑  收藏  举报

回到顶部