使用客户端验证的 Ajax 文件上传

引言

我撰写这篇文章是因为它包含了使用 Ajax 实现文件上传功能所需的所有信息——文件上传、允许的文件类型扩展名的客户端验证、最大上传大小、上传图像的预览功能。

背景

AjaxFileUpload

AjaxFileUpload 是一个 ASP.NET AJAX 控件，允许您异步将文件上传到服务器。

HTTP 处理程序

ASP.NET HTTP 处理程序是一个进程（通常称为“端点”），它响应对 ASP.NET Web 应用程序发出的请求而运行。最常见的处理程序是处理 .aspx 文件的 ASP.NET 页面处理程序。

Using the Code

我不会浪费时间，而是为您提供完成此练习所需的所有不同代码块。让我们从 HTML 代码开始。

将以下 HTML 添加到 .aspx 页面的 form 标签之间。此外，您需要在 .aspx 页面中注册 Ajax 控制工具包 DLL。为了预览图像，我们使用了 ASP 图像控件。

<asp:UpdatePanel ID="upanel" runat="server">
    <ContentTemplate>
        <asp:Image ID="imgsignature" 
        CssClass="thumbimage" runat="server" />
        <ajax:asyncfileupload id="fusignature" runat="server" 
        completebackcolor="White" width="200"
            onuploadedcomplete="fusignature_UploadedComplete" 
            allowedfiletypes="jpg,jpeg,png,gif"
            onclientuploadstarted="uploadStart" 
            onclientuploadcomplete="OnClientAsyncFileUploadComplete"
            onclientuploaderror="uploadError" />
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript 代码

function uploadStart(sender, args) {
    var filename = args.get_fileName();
    var filext = filename.substring(filename.lastIndexOf(".") + 1);
    if (filext == "jpg" || filext == "jpeg" || 
    filext == "png" || filext == "gif") {
        return true;
    }
    else {
        var err = new Error();
        err.name = 'Image Format';
        err.message = 'Only .jpg, .gif, .png, .gif files';
        throw (err);
        return false;
    }
}

当我们在文件上传控件中浏览图像时，`upload start` 函数会触发，并检查正在上传的文件是否为 jpg、jpeg、png 或 gif 类型。如果不是，代码将引发错误，此错误将在 uploadError 函数中处理。

function uploadError(sender, args) {
    addToClientTable("<span style='color:red;'>" + 
    args.get_errorMessage() + "</span>");
}

function addToClientTable(text) {
    var table = document.getElementById("<%= clientSide.ClientID %>");
    var row = table.insertRow(0);

    fillCell(row, 0, text);
}

function fillCell(row, cellNumber, text) {
    var cell = row.insertCell(cellNumber);
    cell.innerHTML = text;
    cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
} 

addToClientTable 和 fillCell 函数 - 您可以在 uploadError 函数中编写任何您想要的代码，以向用户显示格式化的错误消息。

function OnClientAsyncFileUploadComplete(sender, e) {
    var size = e._length;
    if (size <= 4194304) {
        var handlerPage = '<%= Page.ResolveClientUrl("~/Handler.ashx")%>';
        var src = handlerPage;
        document.getElementById('<%= imgsignature.ClientID %>').setAttribute("src", src);
        return true;
    }
    else {
        var err = new Error();
        err.name = 'Max Size';
        err.message = 'Max. size 4 MB';
        throw (err);
        return false;
    }
}

此函数再次验证输入图像的文件大小，并在文件大小超过 4 MB 时显示适当的错误消息。

我正在使用 ashx 文件来显示上传图像的预览，该预览将存储在 session 变量中。

HTTP 处理程序代码

using System.Web.SessionState;

public void ProcessRequest(HttpContext context)
{
    if (context.Request.QueryString["Type"] != null)
    {
        byte[] img = (byte[])context.Session["signatureImage"];
        context.Response.ContentType = "text/image";
        context.Response.BinaryWrite(img);
        context.Response.Flush();
    }
}

请记住在 form 标签中使用以下属性。当表单提交方法为 post 并且表单中包含文件上传控件时，应使用 enctype，并将其值设置为“multipart/form-data”，这意味着不进行字符编码。

enctype="multipart/form-data"  

参考文献

• https://msdn.microsoft.com/en-us/library/bb398986.aspx
• AjaxFileUpload

历史

• 2017 年 9 月 25 日：初始版本