ajax图片上传(asp.net +jquery+ashx)

Posted jeremy1888

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax图片上传(asp.net +jquery+ashx)相关的知识，希望对你有一定的参考价值。

一、建立Default.aspx页面

[csharp] view plain copy
 
  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>ajax图片上传</title>  
  8.     <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  
  9.     <script src="js/jquery.form.js" type="text/javascript"></script>  
  10.       
  11.     <script type="text/javascript">        
  12.       function upload(){  
  13.         var path = document.getElementById("File1").value;  
  14.         var img = document.getElementById("img1");  
  15.         if($.trim(path)==""){  
  16.             alert("请选择要上传的文件");  
  17.             return;  
  18.             }  
  19.               
  20.         $("#form1").ajaxSubmit({  
  21.             success: function (str) {   
  22.                 if(str!=null && str!="undefined"){  
  23.                     if (str == "1") {alert("上传成功");document.getElementById("img1").src="images/logo.jpg?"+new Date();/*上传后刷新图片*/}  
  24.                     else if(str=="2"){alert("只能上传jpg格式的图片");}  
  25.                     else if(str=="3"){alert("图片不能大于1M");}  
  26.                     else if(str=="4"){alert("请选择要上传的文件");}  
  27.                     else {alert(\'操作失败！\');}  
  28.                 }  
  29.                 else alert(\'操作失败！\');  
  30.             },  
  31.             error: function (error) {alert(error);},  
  32.             url:\'Handler.ashx\', /*设置post提交到的页面*/  
  33.             type: "post", /*设置表单以post方法提交*/  
  34.             dataType: "text" /*设置返回值类型为文本*/  
  35.         });  
  36.     }        
  37.     </script>  
  38. </head>  
  39. <body>  
  40.     <form id="form1" runat="server">  
  41.         <input id="File1" name="File1" type="file" />  
  42.         <input id="iptUp" type="button" value="上传Logo"  onclick="upload()"/>  
  43.         <img id="img1" alt="网站Logo" src="images/weblogo.jpg" />  
  44.     </form>  
  45. </body>  
  46. </html>  


二、新建一个一般处理文件Handler.ashx

[csharp] view plain copy
 
    1. <%@ WebHandler Language="C#" Class="Handler" %>  
    2.   
    3. using System;  
    4. using System.Web;  
    5.   
    6. public class Handler : IHttpHandler {  
    7.       
    8.     public void ProcessRequest (HttpContext context) {  
    9.         HttpPostedFile _upfile = context.Request.Files["File1"];  
    10.         if (_upfile == null)  
    11.         {  
    12.             ResponseWriteEnd(context, "4");//请选择要上传的文件  
    13.         }  
    14.         else  
    15.         {  
    16.             string fileName = _upfile.FileName;/*获取文件名： C:\\Documents and Settings\\Administrator\\桌面\\123.jpg*/  
    17.             string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*获取后缀名并转为小写： jpg*/  
    18.             int bytes = _upfile.ContentLength;//获取文件的字节大小  
    19.   
    20.             if (suffix != "jpg")  
    21.                 ResponseWriteEnd(context, "2"); //只能上传JPG格式图片  
    22.             if (bytes > 1024 * 1024)  
    23.                 ResponseWriteEnd(context, "3"); //图片不能大于1M  
    24.   
    25.             _upfile.SaveAs(HttpContext.Current.Server.MapPath("~/images/logo.jpg"));//保存图片  
    26.             ResponseWriteEnd(context, "1"); //上传成功  
    27.         }  
    28.     }  
    29.   
    30.     private void ResponseWriteEnd(HttpContext context, string msg)  
    31.     {  
    32.         context.Response.Write(msg);  
    33.         context.Response.End();  
    34.     }  
    35.       
    36.     public bool IsReusable {  
    37.         get {  
    38.             return false;  
    39.         }  
    40.     }  
    41. }  

项目结构图

 

以上是关于ajax图片上传(asp.net +jquery+ashx)的主要内容，如果未能解决你的问题，请参考以下文章

C# Asp.net使用FormData对象实现ajax提交表单及上传图片

asp.net4.0中多图片上传如何操作

html Ajax文件上传（JQuery和ASP.Net MVC）.html

在 ASP.NET MVC 中通过 JQuery AJAX 上传文件

jQuery ajax 在 asp.net mvc 中上传文件

ASP.NET图片上传（配合jquery.from.js 插件）