在移動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代碼可以將圖片的保存路徑等返回到界面。