zoukankan      html  css  js  c++  java

  • 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 SettingsAdministrator桌面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. }  

    项目结构图
  • 相关阅读:
    PHP入门03 -- 数组与数据结构
    PHP入门02 -- 函数
    PHP入门01 -- 基本语法
    node文章
    Mongodb08
    Mongodb07
    ISO处理jq事件
    map
    Django自定义模板
    JS this指向
  • 原文地址：https://www.cnblogs.com/Jeremy2001/p/7226534.html
Copyright © 2011-2022 走看看