• jQuery + ashx 实现图片按比例预览、异步上传及显示

    关键点：

    • jquery.ajax 方法 和 HTML5 中的 FileReader对象
    • ashx 处理程序
    • asp.net  的 ScriptManager.RegisterStartupScript 调用客户端js脚本

    一、ASP.NET 前台源码：

    [html] view plaincopy
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="load_pic.aspx.cs" Inherits="Default2" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5. <head runat="server">  
    6.     <title></title>  
    7.     <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>  
    8.     <script type="text/javascript" src="Scripts/jquery-extend.js"></script>  
    9. </head>  
    10. <body>  
    11.     <form id="form1" runat="server">  
    12.     <div>  
    13.         <!-- 把浏览图片解析为 base64 字符串 ，通过 jQuery.ajax + ashx 异步保存到数据库中 -->  
    14.         <input type='file' onchange="readURL(this);" />  
    15.         <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="C#后台读取显示" />  
    16.         <!-- 存储 base64 字符串 ，方便在后台处理 -->  
    17.         <asp:HiddenField ID="hf_base64" runat="server" />  
    18.     </div>  
    19.     <div>  
    20.         <img id="img_prev" src="#" alt="your image" /></div>  
    21.     </form>  
    22. </body>  
    23. </html>  

    二、jquery-extent.js 代码

    [javascript] view plaincopy
    1. /* 客户端按比例预览、上传图片 要求：jquery-1.4.1.min.js */  
    2. //================================================================================================  
    3.   
    4. function readURL(input) {  
    5.     if (input.files && input.files[0]) {  
    6.         var reader = new FileReader();  
    7.   
    8.         var maxWidth = 200, maxHeight = 200;  
    9.         reader.onload = function (e) {  
    10.   
    11.             var base64 = e.target.result;  
    12.             loadbase64(base64, maxWidth, maxHeight);  
    13.   
    14.             $("#hf_base64").val(base64);  
    15.         };  
    16.   
    17.         reader.readAsDataURL(input.files[0]);  
    18.     }  
    19. }  
    20. // imgobj : img 标签对象,根据容器自动调整宽、高  
    21. function load_obj_base64(imgobj, base64) {  
    22.   
    23.     maxWidth = $(imgobj).width();  
    24.     maxHeight = $(imgobj).height();  
    25.   
    26.   
    27.     $("<img/>") // 在内存中创建一个img标记  
    28.         .attr("src", base64)  
    29.         .load(function () {  
    30.             var w, h;  
    31.             w = this.width;  
    32.             h = this.height;  
    33.   
    34.   
    35.             if (w < maxWidth && h < maxHeight) { }  
    36.             else  
    37.             { w / h > maxWidth / maxHeight ? this.width = maxWidth : this.height = maxHeight; }  
    38.   
    39.   
    40.             $(imgobj).replaceWith(this);  
    41.         });  
    42. }  
    43. function loadbase64(base64, maxWidth, maxHeight) {  
    44.   
    45.     $("<img/>") // 在内存中创建一个img标记  
    46.         .attr("src", base64).attr("id", "img_prev")  
    47.         .load(function () {  
    48.             var w, h;  
    49.             w = this.width;  
    50.             h = this.height;  
    51.   
    52.             // 当图片比预览区域小时不做任何改变  
    53.             if (w < maxWidth && h < maxHeight) { }  
    54.             else  
    55.             // 当实际图片比例大于预览区域宽高比例时  
    56.             // 缩放图片宽度，反之缩放图片宽度  
    57.             { w / h > maxWidth / maxHeight ? this.width = maxWidth : this.height = maxHeight; }  
    58.   
    59.             $('#img_prev').replaceWith(this);  
    60.   
    61.             $.ajax({  
    62.                 async: false,  
    63.                 type: 'POST',  
    64.                 url: "uploadhandler.ashx",  
    65.                 data: {  
    66.                     file: base64  
    67.                 },  
    68.                 success: function (data) {  
    69.                     //$j('#img_wait').css('display', 'none');  
    70.                 },  
    71.                 beforeSend: function (xhr) {  
    72.                     //$j('#img_wait').css('display', 'inline');  
    73.                 }  
    74.             });  
    75.         });  
    76. }  


    三、uploadhandler.ashx

    [csharp] view plaincopy
    1. <%@ WebHandler Language="C#" Class="uploadhandler" %>  
    2.   
    3. using System;  
    4. using System.Collections.Generic;  
    5. using System.Linq;  
    6. using System.IO;  
    7. using System.Net;  
    8. using System.Web;  
    9. using System.Web.Services;  
    10.   
    11.   
    12. [WebService(Namespace = "http://tempuri.org/")]  
    13. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
    14.   
    15. public class uploadhandler : IHttpHandler  
    16. {  
    17.     public void ProcessRequest(HttpContext context)  
    18.     {  
    19.         context.Response.ContentType = "text/plain";  
    20.         context.Response.Charset = "utf-8";  
    21.   
    22.         try  
    23.         {  
    24.             HttpPostedFile file = context.Request.Files["Filedata"];  
    25.             DBUtility.IDBHelper dbhelper = new DBUtility.SqlHelper();  
    26.             string strSql = "UPDATE [LDZ] set Photo = @imagedata WHERE [ID] = 13;";  
    27.             byte[] buffer = null;  
    28.   
    29.             if (file != null)  
    30.             {  
    31.                 buffer = getByte(file);  
    32.             }  
    33.             else  
    34.             {  
    35.                 string img = context.Request.Params["file"];  
    36.                 img = img.Substring(img.IndexOf("base64,") + 7);  
    37.                 buffer = Convert.FromBase64String(img);  
    38.             }  
    39.             int r = dbhelper.ExecuteNonQuery(WebConfig.DB_CONN, System.Data.CommandType.Text,   
    40.                 strSql,new System.Data.SqlClient.SqlParameter("@imagedata", buffer));  
    41.   
    42.             context.Response.Write("1");  
    43.         }  
    44.         catch (Exception ex)  
    45.         {  
    46.             context.Response.Write("0");  
    47.         }  
    48.     }  
    49.   
    50.     private byte[] getByte(HttpPostedFile file)  
    51.     {  
    52.         byte[] buffer = new byte[file.ContentLength];  
    53.         file.InputStream.Read(buffer, 0, buffer.Length);  
    54.         return buffer;  
    55.     }  
    56.   
    57.   
    58.     public bool IsReusable  
    59.     {  
    60.         get  
    61.         {  
    62.             return false;  
    63.         }  
    64.     }  
    65.   
    66.     //图片转为base64编码的字符串  
    67.     protected string ImgToBase64String(string Imagefilename)  
    68.     {  
    69.         try  
    70.         {  
    71.             System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(Imagefilename);  
    72.   
    73.             MemoryStream ms = new MemoryStream();  
    74.             bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);  
    75.             byte[] arr = new byte[ms.Length];  
    76.             ms.Position = 0;  
    77.             ms.Read(arr, 0, (int)ms.Length);  
    78.             ms.Close();  
    79.             return Convert.ToBase64String(arr);  
    80.         }  
    81.         catch (Exception ex)  
    82.         {  
    83.             return null;  
    84.         }  
    85.     }  
    86.   
    87.     //base64编码的字符串转为图片  
    88.     protected System.Drawing.Bitmap Base64StringToImage(string strbase64)  
    89.     {  
    90.         try  
    91.         {  
    92.             byte[] arr = Convert.FromBase64String(strbase64);  
    93.             MemoryStream ms = new MemoryStream(arr);  
    94.             System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);  
    95.             //bmp.Save("test.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);  
    96.             ms.Close();  
    97.             return bmp;  
    98.         }  
    99.         catch (Exception ex)  
    100.         {  
    101.             return null;  
    102.         }  
    103.     }  
    104. }  


    四、ASP.NET 后台代码

    [csharp] view plaincopy
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.UI;  
    6. using System.Web.UI.WebControls;  
    7. using System.Data;  
    8.   
    9. public partial class Default2 : System.Web.UI.Page  
    10. {  
    11.     protected void Page_Load(object sender, EventArgs e)  
    12.     {  
    13.   
    14.     }  
    15.     protected void Button1_Click(object sender, EventArgs e)  
    16.     {  
    17.         DBUtility.IDBHelper dbhelper = new DBUtility.SqlHelper();  
    18.         string strSql = "select Photo from [LDZ] WHERE [ID] = 13;";  
    19.   
    20.         DataSet r = dbhelper.ExecuteQuery(WebConfig.DB_CONN, System.Data.CommandType.Text, strSql);  
    21.   
    22.         object imgObj = r.Tables[0].Rows[0]["Photo"];  
    23.   
    24.         string base64 = "data:image/jpeg;base64,";  
    25.         if (imgObj != System.DBNull.Value)  
    26.         {  
    27.             byte[] buffer = (byte[])imgObj;  
    28.             base64 += Convert.ToBase64String(buffer);  
    29.         }  
    30.   
    31.         string hf_base64 = this.hf_base64.Value;  
    32.         ScriptManager.RegisterStartupScript(this, this.GetType(), "",  
    33.             "loadbase64('" + base64 + "', 500, 500)", true);  
    34.     }  
    35. }  

    注：ajax 方式异步读取数据库显示图片的方法同上传一致，使用 ashx 返回base64字符串在客户端处理即可。

    记录一个让我纠结良久的问题：

     在Page_Load 函数中，只有第一个用 ScriptManager.RegisterStartupScript 注册的脚本才有效

    [csharp] view plaincopy
    1. /// <summary>  
    2.    /// 此函数范围内只有第一个用 ScriptManager.RegisterStartupScript 注册的脚本才有效   
    3.    /// </summary>  
    4.    protected void Page_Load(object sender, EventArgs e)  
    5.    {  
    6.        if (!IsPostBack)  
    7.        {  
    8.            // 首次加载的处理方法  
    9.            if (this.Request.Params["lid"] != null)  
    10.            {  
    11.                // 照片处理，从数据获取过程省略......  
    12.                object imgObj = row["Photo"];  
    13.                string base64 = "data:image/jpeg;base64,";  
    14.                if (imgObj != System.DBNull.Value)  
    15.                {  
    16.                    byte[] buffer = (byte[])imgObj;  
    17.                    base64 += Convert.ToBase64String(buffer);  
    18.                    this.hf_base64.Value = base64;  
    19.                    // js脚本 load_obj_base64 是用来在客户端渲染图片的  
    20.                    string script = "$('#lz_caption strong').text('修改楼长信息');"  
    21.                             +"load_obj_base64($('#photo_lz').parent().next().children('img'),'"+ base64 + "')";  
    22.                     ScriptManager.RegisterStartupScript(this, this.GetType(), "",script, true);  
    23.   
    24.         }  
    25.   
    26.     }  

    此示例的前提是浏览器必须支持 HTML5 ，但现在的IE对 HTML5支持太烂，如需在 IE中使用，请参考下一篇：IE 中上传前按比例预览图片
  • 相关阅读:
    ADO.NET FOR MySQL帮助类
    遍历文件夹及其子文件夹下的.pdf文件，并解压文件夹下所有的压缩包
    history.back();谷歌浏览器，iframe后退问题
    Request.url请求属性
    正则表达式 取两字符中间的字符串（双向非贪婪模式）
    MVC 项目中为什么会有两个web.config
    c#动态编译并动态生成dll
    siteserver cms选择栏目搜索无效
    jquery修改Switchery复选框的状态
    ntko office在线编辑控件问题记录
  • 原文地址：https://www.cnblogs.com/jingxinchao/p/3213615.html
Copyright © 2020-2023  润新知