关键点：

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

一、ASP.NET 前台源码：

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

二、jquery-extent.js 代码

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

三、uploadhandler.ashx

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

四、ASP.NET 后台代码

  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. public partial class Default2 : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. }
  13. protected void Button1_Click(object sender, EventArgs e)
  14. {
  15. DBUtility.IDBHelper dbhelper = new DBUtility.SqlHelper();
  16. string strSql = "select Photo from [LDZ] WHERE [ID] = 13;";
  17. DataSet r = dbhelper.ExecuteQuery(WebConfig.DB_CONN, System.Data.CommandType.Text, strSql);
  18. object imgObj = r.Tables[0].Rows[0]["Photo"];
  19. string base64 = "data:image/jpeg;base64,";
  20. if (imgObj != System.DBNull.Value)
  21. {
  22. byte[] buffer = (byte[])imgObj;
  23. base64 += Convert.ToBase64String(buffer);
  24. }
  25. string hf_base64 = this.hf_base64.Value;
  26. ScriptManager.RegisterStartupScript(this, this.GetType(), "",
  27. "loadbase64('" + base64 + "', 500, 500)", true);
  28. }
  29. }

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

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

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

  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. }
此示例的前提是浏览器必须支持 HTML5 ，但现在的IE对 HTML5支持太烂，如需在 IE中使用，请参考下一篇：IE 中上传前按比例预览图片

jQuery + ashx 实现图片按比例预览、异步上传及显示的更多相关文章

  1. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  2. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  3. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  4. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  5. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  6. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  8. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

  9. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

随机推荐

  1. Servlet2.5版本和Servlet3.0版本

    在学习这节之前你需要在你自己的电脑进行如下配置: 配置Java运行环境:JDK+JRE的安装配置,参考博客Windows下配置Java开发环境: 安装Eclipse:参考博客Windows下配置Jav ...

  2. [LeetCode] 504. Base 7 基数七

    Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...

  3. 【Tools】Myeclise-2018.12.0 最新破解文件

    Myeclise-2018.12.0 最新破解文件. 最近在写android app登录块,需要用到这个工具,顺手就拿到了,发现资源太少.这里分享给大家. 有币高富帅打赏下载地址: https://d ...

  4. 给通过canvas生成的二维码添加logo

    以jquery.qrcode为例来说, 生成二维码代码: 依赖jquery.js, jquery.qrcode.js //计算宽,高,中心坐标,logo大小 var width = 256,heigh ...

  5. spring中最重要的一些Aware接口

    附上关于这节的spring官方文档: ApplicationContextAware and BeanNameAware aware接口在spring中无处不在,它是用来感知spring的ioc co ...

  6. 「模拟赛20191019」A 简单DP

    题目描述 给一个\(n\times m\)的网格,每个格子上有一个小写字母. 对于所有从左上角\((1,1)\)到右下角\((n,m)\)只向下或向右走的路径构成的集合,判断是否存在两条走法不同的路径 ...

  7. Windows中使用 Python 调用 Matlab 程序

    https://ww2.mathworks.cn/help/matlab/matlab_external/system-and-configuration-requirements.html http ...

  8. [HAOI2008]硬币购物-题解

    传送门 解答 根据容斥原理 \[ \left|\bigcap_{i=1}^n \overline{S_i}\right| = |U| - \left|\bigcup_{i=1}^n S_i\right ...

  9. python3.7 pip升级或安装，拒绝访问 解决方案

  10. L2R 三：常用工具包介绍之 XGBoost与LightGBM

    L2R最常用的包就是XGBoost 和LightGBM,xgboost因为其性能及快速处理能力,在机器学习比赛中成为常用的开源工具包, 2016年微软开源了旗下的lightgbm(插句题外话:微软的人 ...