简单使用Jquery和ashx一般处理程序实现无刷新上传文件

03

2013
05

使用html或aspx建立一个上传页面，再实用jquery进行图片或文件上传

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 id="Head1" 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>

            $("[id$='form1']").ajaxSubmit({
                url: "Ajax/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>

再建立ashx页面进行图片的上传处理，这个可以使用：

<%@ WebHandler Language="C#" CodeBehind="UploadHandler.ashx.cs" Class="FileUploadSample.Handler.UploadHandler" %>

using System;
using System.IO;
using System.Web;
using System.Web.Services;
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;
        }
    }
}