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

最新推荐文章于 2021-08-05 15:03:32 发布

转载最新推荐文章于 2021-08-05 15:03:32 发布 · 1.3k 阅读

文章标签：

#c#

c# 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用JQuery AJAX实现文件上传的方法。通过在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,  
                dataType: "json",
                success: function (rs)
                {
                    var t = eval(rs);
                    alert(t.msg);
                }
            });  
  
            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 > 0)    
        {    
            HttpFileCollection files = context.Request.Files;    
            for (int i = 0; i < files.Count; i++)    
            {    
                HttpPostedFile file = files[i];    
                string fname = context.Server.MapPath("/") + file.FileName;    
                file.SaveAs(fname);    
            }    
            context.Response.ContentType = "text/plain";

	    string json = "{\"success\":\"true\",\"result\":\"success\",\"msg\":\"上传成功\"}";
            context.Response.Write(json );    
        }    
     
    }    
     
    public bool IsReusable  
    {    
        get   
        {    
            return false;    
        }    
    }    
     
}