如何通过html上传照片（自定义上传图标）

比眉伴天荒 2022-08-14 05:40 184阅读 0赞

在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。

以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。

接下来我们讲讲如何利用html上传照片。

废话不多说。我们来看一段html代码

从上面的代码我们可以看到。我们上传的控件外部使用的是form表单。

enctype：表示的是我们的表单类型

target：表示表单提交后的跳转页面，表单的提交会刷新页面，为了做到页面无刷新。我们特地设置了一个iframe。设置为隐藏。隐藏的action设置为后台上传图片的后台地址。

</span>

这是上传的控件。主要是input控件设置为file类型。通过 <i class="dib upload"></i>设置背景图片，具体怎么设置样式和图片。我把CSS贴出来给大家看看。

/********照片上传***********/
            .upload {width: 32px;height: 32px; background: url('../../Resource/Image/upload.png') no-repeat;}
            .uploading
            {
                width: 16px; height: 16px;margin-left: 15px;
                background: url('../../Resource/Image/icon/sloading.gif') no-repeat;
                background-size: 16px 16px;
            }
            .uploadfile{top: 0;left: 0;width: 32px;height: 32px; opacity: 0; }
            .text{position: absolute; top: 0px;}
            .dib{display: inline-block;}
            .vm{ vertical-align: middle;margin: -5px 5px 5px -4px;}
            .pr{position: relative;}
            .mr10{margin-right: 5px;}
            .upload-box{text-align: left;}

OK相信通过上面的代码大家已经知道如何将上传控件进行包装。我们看一下效果图  
![Center][]

上面的上传图片可自行修改。但是需要注意背景图片需要和上传控件宽高一致。

那么我们看后台代码怎么去写？

#region 修改用户头像图片
            private string UpdatePhoto(HttpContext context)
            {
                string result = "";
                System.Web.HttpFileCollection files = context.Request.Files;
                if (files.Count > 0)
                {
                    System.Web.HttpPostedFile postedfile = files[0];
                    Stream str = postedfile.InputStream;
                    StreamReader streamReader = new StreamReader(str);
                    byte[] bytes = new byte[1024];
                    //地址名字
                    string name = DateTime.Now.Ticks+ ".png";
                    string fPath = "";
                    //本地
                    string url = ""; 
                    string tag = "";
                    //服务器
                    fPath = context.Request.MapPath("../assets/img/avatars");
                    url = ConfigurationManager.AppSettings["loginicon"].ToString() + name;
                    tag = name;
    
                    FileStream fstr = new FileStream(fPath + "//" + name, FileMode.OpenOrCreate, FileAccess.Write);
                    int len = 0;
                    while ((len = str.Read(bytes, 0, 1024)) > 0)
                    {
                        fstr.Write(bytes, 0, len);
                    }
                    streamReader.Dispose();
                    str.Dispose();
                    fstr.Flush();
                    fstr.Close();
                    context.Response.ContentType = "text/html";
                    result = "<script>parent.setPic('" + url + "','" + tag + "')</script>";
                }
                return result;
            }
            #endregion

这是C\#中一般处理程序，服务端代码的基本功能将图片上传并保存到指定目录。同时返回一段js代码。该JS代码可以将图片的保存路径等返回到界面。

[Center]: /images/20220731/1e2ac47768a94b7da44c127f88d5d520.png