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

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

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

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

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

账号头像 *：

修改头像

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

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

修改头像

这是上传的控件。主要是input控件设置为file类型。通过

设置背景图片，具体怎么设置样式和图片。我把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 = "";

}

return result;

}

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