您的位置:首页 > Web前端 > JQuery

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

2016-11-29 17:02 931 查看
首先创建一个网页,网页中添加如下代码。

1

2

3

4

5

6

7

8

9

10

11

12

13
<
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;
}
}

}




最后效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  c#