在移動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 enctype="multipart/form-data" target="filetarget" method="post" id="form" action="SystemLoginHandler.ashx?action=updateicon" style="margin-top:30px">
 

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>

 /********照片上傳***********/
        .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;}

上面的上傳圖片可自行修改。但是需要注意背景圖片需要和上傳控制元件寬高一致。

那麼我們看後臺程式碼怎麼去寫？

 #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