asp.net 中使用JQuery Ajax 上传文件

首先创建一个网页，网页中添加如下代码。

  <h3>Upload File using Jquery AJAX in Asp.net</h3>
    <table>
        <tr>
        <td>File:</td>
        <td>
            <asp:FileUpload ID="fupload" runat="server"  onchange='prvimg.UpdatePreview(this)' /></td>
        <td><asp:Image ID="imgprv" runat="server" Height="90px" Width="75px"  /></td>
        </tr>
        <tr>
        <td></td>
        <td><asp:Button ID="btnUpload" runat="server" cssClass="button" Text="Upload Selected File" /></td>
        </tr>
    </table>

接着在添加jquery代码

$("#btnUpload").click(function (evt) {
            var fileUpload = $("#fupload").get(0);
            var files = fileUpload.files;  
 
            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }  
 
            $.ajax({
                url: "FileUploadHandler.ashx",
                type: "POST",
                data: data,
                contentType: false,
                processData: false,
                success: function (result) { alert(result); },
                error: function (err) {
                    alert(err.statusText)
                }
            });  
 
            evt.preventDefault();
        });  

FileUploadHandler.ashx中的代码

<%@ WebHandler Language="C#" Class="FileUploadHandler" %>    
 
using System;
using System.Web;    
 
public class FileUploadHandler : IHttpHandler
{    
 
    public void ProcessRequest (HttpContext context)
    {
        if (context.Request.Files.Count > )
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = ; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname = context.Server.MapPath("~/uploads/" + file.FileName);
                file.SaveAs(fname);
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("File Uploaded Successfully!");
        }    
 
    }    
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }    
 
}   

最后效果如下：