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

Porschev

发布于 2018-01-16 13:23:54

2.4K00

代码可运行

运行总次数：0

代码可运行

上传文件算是比较常规的一个功能，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)