如何设置个人头像

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置个人头像相关的知识,希望对你有一定的参考价值。

 为自己的项目添加一个简单的用户头像是不是显得很有趣啊

运行效果

技术分享

完成起来其实也很简单

先给服务器添加一个 pic 文件夹用来存放图片

一.前端设计

1.需要一个上传文件的控件FileUpload

2.一个上传按钮Button

3.一个图片按钮ImageButton

4.一个容器Panel(包含2和3)

先隐藏容器.直到图片点击事件被触发才显示。

二.后台设计

1.上传文件事件

需要限制格式以及大小

当然图片的命名重复这里没有考虑(用时间加原名在一定程度上可以解决)

 protected void btnupload_Click(object sender, EventArgs e)
        {
            Boolean fileOk = false;
            //指定文件路径,pic是项目下的一个文件夹;~表示当前网页所在的文件夹
            String path = Server.MapPath("~/pic/");//物理文件路径
            int length = this.FileUpload1.PostedFile.ContentLength;//获取图片大小,以字节为单位
            if (length > 6000)
            {
                Response.Write("<script language=‘javascript‘>alert(‘您选择的图片过大!‘);</script>");
            }
            else
            {
                //文件上传控件中如果已经包含文件
                if (FileUpload1.HasFile)
                {
                    //得到文件的后缀
                    String fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();

                    //允许文件的后缀
                    String[] allowedExtensions = { ".gif", ".png", ".jpeg", ".jpg", ".bmp" };

                    //看包含的文件是否是被允许的文件的后缀
                    for (int i = 0; i < allowedExtensions.Length; i++)
                    {
                        if (fileExtension == allowedExtensions[i])
                        {
                            fileOk = true;
                        }
                    }
                }
                if (fileOk)
                {
                    try
                    {
                        //文件另存在服务器的指定目录下     
                        string name = FileUpload1.FileName;//获取上传的文件名
                        path = "~/pic/" + name;
                        DataCom.comdata("update **** set 路径=‘" + path + "‘ where 用户名=‘" +txtnae.Text + "");//保存文件路径数据到数据库
                        Image1.ImageUrl = path;
                        FileUpload1.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));
                        Response.Write("<script>alert(‘文件上传成功!‘);</script>");
                    }
                    catch
                    {
                        Response.Write("<script>alert(‘文件上传失败!‘);</script>");
                    }
                }
                else
                {
                    Response.Write("<script>alert(‘只能上传gif,png,jpeg,jpg,bmp图象文件!‘);</script>");
                }
            }
        }

运行效果

技术分享技术分享技术分享

三.把图片的路径和名称保存到数据库中

把图片保存在服务器上

如果服务器上的图片出现命名重复,可能会造成图片丢失

四.最好把该头像放在用户控件当中。

可以大大的减少代码

 

以上是关于如何设置个人头像的主要内容,如果未能解决你的问题,请参考以下文章

我在百度个人中心上传头像怎么总传不了

利用mask-image蒙层编写异形头像

Word简历如何插入个人头像?

小程序各种功能代码片段整理---持续更新

油管怎么换头像

如何在 Xcode 上按高度调整 Facebook 个人资料图片的大小?