• Aspx.net 上传图片并显示预览实现个人简历

    使用js插件和imput file实现上传图片，并显示预览图片功能。经常用在用户个人信息页面，用户选择个人证件照片—预览—上传—保存数据库。Codeby lanhai96

    实现效果如下图：

     页面右侧，用户点击“选择文件”，显示下图

     选择自己的用户照片，在右侧的图片窗口就会显示用户选择图片的预览。

     用户确定无误后，点击上传，此时图片根据规则已上传至服务器指定地址。

    最后，用户修改其他信息，如姓名，修改完毕后：

     点击保存，将实现修改的信息和修改的图片一起保存到数据库。

     保存数据成功后，将刷新显示当前修改的信息。

     以上功能使用bootstrap框架，支持除IE 8以下外的所有主流浏览器。

    实现以上功能的核心代码如下：

    1、引入关键的js和css文件

      <script type="text/javascript" src="./Scripts/jquery-1.8.1.min.js">script>

            <script type="text/javascript" src="./Scripts/CJL.0.1.min.js">script>

            <script type="text/javascript" src="./Scripts/QuickUpload.js">script> 

            <script type="text/javascript" src="./Scripts/jquery.form.js">script>

    其他样式文件略

    2、body中的关键元素

    1. <tr>
    2.  
    3.                                                             <td>
    4.  
    5.                                                                 姓名:
    6.  
    7.                                                             td>
    8.  
    9.                                                             <td>
    10.  
    11.                                                                 <asp:HiddenField ID="hid_userid" runat="server" Value="" />
    12.  
    13.                                                                 <input id="username" type="text" class="form-control" value='<%=username %>'  />
    14.  
    15.                                                             td>
    16.  
    17.                                                             <td>
    18.  
    19.                                                                 电话:
    20.  
    21.                                                             td>
    22.  
    23.                                                             <td>
    24.  
    25.                                                                 <input id="telphone" type="text" class="form-control" value='<%=telphone %>' />
    26.  
    27.                                                             td>
    28.  
    29.                                                             <td>
    30.  
    31.                                                                 拼音:
    32.  
    33.                                                             td>
    34.  
    35.                                                             <td>
    36.  
    37.                                                                 <input type="text" class="form-control" value='<%=pinyin %>' />
    38.  
    39.                                                             td>
    40.  
    41.                                                             <td rowspan="3" style="padding-left:15px;height:180px;width:150px;">
    42.  
    43.                                                               
    44.  
    45.                                                                 <div id="hidpic" style="  visibility:hidden;" runat="server"><%=photo %>div>                                                               
    46.  
    47.                                                                
    48.  
    49.                                                                 <div>               
    50.  
    51.                                                                     <img id="idImg"    style="width:195px;height:240px;" title="照片"/>
    52.  
    53.                                                                 div>
    54.  
    55.                                                                 <div style="margin:10px;float:left;">
    56.  
    57.                                                                     <span id="filebtn" class="btn" >选择文件:span>
    58.  
    59.                                                                     <div  style="height:20px;width:50px;border-radius:4px;background-color:green;visibility:hidden;">
    60.  
    61.                                                                         <input id="idFile" runat="server" name="pic" type="file"   />
    62.  
    63.                                                                     div>
    64.  
    65.                                                                 div>
    66.  
    67.                                                                 <div style="margin-top: 10px;">
    68.  
    69.                                                                    
    70.  
    71.                                                                     <input type="button" name="resets" value="上传" class="btn" onclick="upLoadFile()" />
    72.  
    73.                                                                 div>
    74.  
    75.                                                             td>
    76.  
    77.  
    78.  
    79.                                                         tr>

    3、前台关键的函数和方法

     图片通过ajax方法上传，上传后通过js插件来显示预览

    1. function clearFileInput() {
    2.             var form = document.createElement('form1');
    3.             document.body.appendChild(form);
    4.             //记住file在旧表单中的的位置
    5.             var file = document.getElementById("idFile");
    6.             var pos = file.nextSibling;
    7.             form.appendChild(file);
    8.             form.reset();//ͨ重置form下的窗口
    9.             document.getElementById("colspan").appendChild(file);
    10.             document.body.removeChild(form);
    11.             //获取图片元素对象
    12.             document.getElementById("idImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='images/noimage.jpg'";
    13.            
    14.           
    15.             $("#idImg").attr('src', 'images/noimage.jpg');
    16.             $("#idImg").removeAttr('src');
    17.             $("#idImg").removeAttr('style');
    18.         }
    19.         function upLoadFile() {          
    20.  
    21.             $('#form1').ajaxSubmit({
    22.                 semantic: true, 
    23.                 type: 'post',
    24.                 url: './userphotofile.ashx',//调用后台程序上传图片到指定位置
    25.                 success: function (result) {
    26.  
    27.                     if (result == "false") {
    28.                         alert("失败");
    29.                     }
    30.                     else {
    31.  
    32.                         $('#hidpic').html(result);//上传成功后，记录图片路径
    33.                         alert("成功");
    34.                                             }
    35.                     
    36.                 },
    37.                 error: function (result) {
    38.                     alert("失败" + result);
    39.                 }
    40.  
    41.             });
    42.  
    43.         }
    44.       
    45.         $(document).ready(function () {
    46.             $('#filebtn').click(function () {               
    47.                 $('#idFile').click();
    48.             });
    49.  
    50.         });

    以下的图片预览的js要放到页面的最后：

    1. <script type="text/javascript" src="./Scripts/ImagePreview.js">script>
    2. <script type="text/javascript">
    3.  
    4.         var ip = new ImagePreview($$("idFile"), $$("idImg"), {
    5.             maxWidth: 200, maxHeight: 200, action: "./ImagePreview.ashx"
    6.         });
    7.         ip.img.src = ImagePreview.TRANSPARENT;
    8.         ip.file.onchange = function () { ip.preview(); };
    9.  
    10.     script>

    文件修改完成后，同样使用ajax方式，实现所有数据的最终保存。

    1. $('#save').click(function () {
    2.             var name = $('#username').val();
    3.             var userid = $('#hid_userid').val();
    4.             var telphone = $('#telphone').val();
    5.             var hidpicpath = $('#hidpic').html();
    6.  
    7.             var userjson;
    8.             userjson = {
    9.                 UserID: userid,
    10.                 UserName: name,
    11.                 Usertelephone: telphone,
    12.                 UserPhoto: hidpicpath
    13.             };
    14.             var tr_data = JSON.stringify(userjson);
    15.  
    16.  
    17.             $.ajax({
    18.                 contentType: "application/json",
    19.                 type: "post",
    20.                 datatype: "json",
    21.                 url: "index.aspx/Save",
    22.                 data: "{'data':'" + tr_data + "'}",
    23.  
    24.                 success: function (msg) {
    25.                     alert("保存成功");
    26.  
    27.                     window.location.href = "index.aspx";
    28.                 },
    29.                 error: function (x) {
    30.                     alert("失败" + x);
    31.                     window.location.href = "index.aspx";
    32.                 }
    33.             });
    34.  
    35.  
    36.         });

    4、后台代码部分

    1. //页面加载时，初始化的数据
    2. protected void InitData(string userid)
    3.         {
    4.             Users user = new Users();
    5.             DataTable dt = DBHelp.GetDataSet("select * from Users");
    6.  
    7.             username = dt.Rows[0]["UserName"].ToString() ;
    8.             pinyin = dt.Rows[0]["UserPinYin"].ToString();
    9.  
    10.  
    11.  
    12.             if (dt.Rows[0]["UserPhoto"].ToString() != null || dt.Rows[0]["UserPhoto"].ToString() != "./image/noimage.jpg" || dt.Rows[0]["UserPhoto"].ToString() != "")
    13.             {
    14.                 photo = dt.Rows[0]["UserPhoto"].ToString();
    15.             }
    16.             else
    17.                 user.UserPhoto = "./image/noimage.jpg";
    18.             if (dt.Rows[0]["telephone"].ToString() != null || dt.Rows[0]["telephone"].ToString() != "")
    19.             {
    20.                 telphone = dt.Rows[0]["telephone"].ToString();
    21.             }
    22.             else
    23.             {
    24.                 telphone = "";
    25.             }
    26.         }
    1. //ajax调用后台时的方法
    2. [WebMethod]
    3.         public static bool Save(string data)
    4.         {
    5.  
    6.             JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
    7.             Users _jsondutydata = jsonSerializer.Deserialize(data);
    8.  
    9.             Users user = new Users();
    10.             user.UserID = _jsondutydata.UserID;
    11.             user.UserName = _jsondutydata.UserName;
    12.             user.Usertelephone = _jsondutydata.Usertelephone;
    13.             user.UserPhoto = _jsondutydata.UserPhoto;
    14.  
    15.  
    16.             string sql = "Update Users Set UserName=@Username,UserPhoto=@UserPhoto,telephone=@userphone where UserID='" + user.UserID + "'";
    17.             SqlParameter[] para = new SqlParameter[]
    18.             {
    19.                 new SqlParameter("@Username",user.UserName),
    20.                 new SqlParameter("@UserPhoto",user.UserPhoto),
    21.                 new SqlParameter("@userphone",user.Usertelephone)
    22.             };
    23.             int i = DBHelp.ExecuteCommand(sql, para);
    24.             if (i > 0)
    25.             {
    26.                 return true;
    27.             }
    28.             else
    29.             {
    30.                 return false;
    31.             }
    32.         }

    5、两个处理程序的代码

    Userphotofile.ashx

    //用户图片上传

    1. public class userphotofile : IHttpHandler
    2.     {
    3.  
    4.         public void ProcessRequest(HttpContext context)
    5.         {
    6.            // context.Response.ContentType = "text/plain";
    7.             string res = "";
    8.             HttpFileCollection files = context.Request.Files;
    9.             if (files.Count > 0)
    10.             {
    11.  
    12.                 Random rnd = new Random();
    13.                 for (int i = 0; i < files.Count; i++)
    14.                 {
    15.                     HttpPostedFile file = files[i];
    16.  
    17.                     if (file.ContentLength > 0)
    18.                     {
    19.                         string fileName = file.FileName;
    20.                         string extension = Path.GetExtension(fileName);
    21.                         int num = rnd.Next(5000, 10000);
    22.                         string path = "./photo/" + num.ToString() + extension;
    23.                         file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));
    24.  
    25.                         res = path.Substring(1, path.Length - 1);
    26.                         //更新该用户数据库
    27.  
    28.                     }
    29.                 }
    30.                 context.Response.Write(res);
    31.             }
    32.             else
    33.             {
    34.                 context.Response.Write("false");
    35.             }
    36.         }

    ImagePreview.ashx

    //图片预览处理程序

    1. public void ProcessRequest(HttpContext context)
    2.         {
    3.             if (context.Request.Files.Count > 0)
    4.             {
    5.                 HttpPostedFile file = context.Request.Files[0];
    6.  
    7.                 if (file.ContentLength > 0 && file.ContentType.IndexOf("image/") >= 0)
    8.                 {
    9.                     int width = Convert.ToInt32(context.Request.Form["width"]);
    10.                     int height = Convert.ToInt32(context.Request.Form["height"]);
    11.  
    12.                     string path = "data:image/jpeg;base64," + Convert.ToBase64String(ResizeImg(file.InputStream, width, height).GetBuffer());
    13.  
    14.                     context.Response.Write(path);
    15.                 }
    16.             }
    17.         }
    18.         public MemoryStream ResizeImg(Stream ImgFile, int maxWidth, int maxHeight)
    19.         {
    20.             Image imgPhoto = Image.FromStream(ImgFile);
    21.  
    22.             decimal desiredRatio = Math.Min((decimal)maxWidth / imgPhoto.Width, (decimal)maxHeight / imgPhoto.Height);
    23.             int iWidth = (int)(imgPhoto.Width * desiredRatio);
    24.             int iHeight = (int)(imgPhoto.Height * desiredRatio);
    25.  
    26.             Bitmap bmPhoto = new Bitmap(iWidth, iHeight);
    27.  
    28.             Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
    29.             gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, iWidth, iHeight), new Rectangle(0, 0, imgPhoto.Width, imgPhoto.Height), GraphicsUnit.Pixel);
    30.  
    31.             MemoryStream ms = new MemoryStream();
    32.             bmPhoto.Save(ms, ImageFormat.Jpeg);
    33.  
    34.             imgPhoto.Dispose();
    35.             gbmPhoto.Dispose();
    36.             bmPhoto.Dispose();
    37.  
    38.             return ms;
    39.         }

    数据库操作的代码这里省略了，详细功能可以参考源码。源码和数据库下载地址：https://download.csdn.net/download/lanhai96/86398822

    几个注意事项：

    1、js中调用的form1，是form的id；

    2、form中要配置enctype参数，不然不能传递对象。

    <form id="form1" runat="server" method="post" enctype="multipart/form-data">

    3、使用ajaxSubmit要引用jquery.form.js，同时配置semantic参数为true，才能支持极速360等主流浏览器，不然只支持firefox浏览器。

    $('#form1').ajaxSubmit({

                    semantic: true,

    4、注意留心JSON对象的创建和解析。

    5、[WebMethod]的用法：带有这个标识的方法，可以在在前端直接利用ajax方法调用

    6、文章全为原创，码字不易，转载请注明蓝海云梦。

  • 相关阅读:
    cesium加载高层级离线影像地图瓦片（天地图、19级Arcgis）
    60. UE5 RPG 使用场景查询系统（EQS，Environment Query System）实现远程敌人寻找攻击位置
    WebRTC系列-网络传输之7-ICE补充之偏好(preference)与优先级(priority)
    JavaScript实现在HTML中的粒子文字特效
    从理论到实践：如何用 TDengine 打造完美数据模型​
    深入探究MinimalApi是如何在Swagger中展示的
    微软 SQL 服务器被黑，带宽遭到破坏
    新库上线 | CnOpenData中国审计年鉴数据
    面试：HashMap
    浅层神经网络和深层神经网络介绍
  • 原文地址：https://blog.csdn.net/lanhai96/article/details/126295313