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

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

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

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

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

<td class="left"> 账号头像<span style="color: red; font-weight: bolder">*</span>：</td>
  <td>
    <div>
      <form enctype="multipart/form-data" target="filetarget" method="post" id="form" action="SystemLoginHandler.ashx?action=updateicon" style="margin-top:30px">
           <div class="upload-box">
                   <span class="pr dib vm upload-btn"><i class="dib upload"></i>
                   <div class="text">
                       <input type="file" name="uploadfile" class="pa uploadfile" style="overflow: hidden" />
                   </div>
                   </span>
           

<span class="dib vm ftip" style="color: rgb(131, 131, 131);">修改头像</span>
           </div>
     </form>
<iframe name="filetarget" id="filetarget" style="display: none"></iframe>
   </div>
</td>
           

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

<form enctype="multipart/form-data" target="filetarget" method="post" id="form" action="SystemLoginHandler.ashx?action=updateicon" style="margin-top:30px">
           

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

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

<div class="upload-box">
          <span class="pr dib vm upload-btn"><i class="dib upload"></i>
          <div class="text">
             <input type="file" name="uploadfile" class="pa uploadfile" style="overflow: hidden" />
          </div>
           

</span>
           

<span class="dib vm ftip" style="color: rgb(131, 131, 131);">修改头像</span>
 </div>
           

这是上传的控件。主要是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相信通过上面的代码大家已经知道如何将上传控件进行包装。我们看一下效果图

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

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

#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代码可以将图片的保存路径等返回到界面。