ajax圖片上傳(asp.net +jquery+ashx)

來源:互聯網
上載者:User

標籤:nts   err   toc   inpu   and   XML   tin   1.0   mini   

一、建立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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.