上传图片

html中咋样上传照⽚,如何通过html上传照⽚（⾃定义上传图

标）

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

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

接下来我们讲讲如何利⽤html上传照⽚。

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

账号头像*：

修改头像

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

target：表⽰表单提交后的跳转页⾯，表单的提交会刷新页⾯，为了做到页⾯⽆刷新。我们特地设置了⼀个iframe。设置为隐藏。隐藏的

action设置为后台上传图⽚的后台地址。

修改头像

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

设置背景图⽚，具体怎么设置样式和图⽚。我把CSS贴出来给⼤家看看。

/********照⽚上传***********/

.upload{width:32px;height:32px;background:url('../../Resource/Image/')no-repeat;}

.uploading

{

width:16px;height:16px;margin-left:15px;

background:url('../../Resource/Image/icon/')no-repeat;

background-size:16px16px;

}

.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:-5px5px5px-4px;}

.pr{position:relative;}

.mr10{margin-right:5px;}

.upload-box{text-align:left;}OK相信通过上⾯的代码⼤家已经知道如何将上传控件进⾏包装。我们看⼀下效果图

上⾯的上传图⽚可⾃⾏修改。但是需要注意背景图⽚需要和上传控件宽⾼⼀致。

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

#region修改⽤户头像图⽚

privatestringUpdatePhoto(HttpContextcontext)

{

stringresult="";

leCollectionfiles=;

if(>0)

{

stedFilepostedfile=files[0];

Streamstr=tream;

StreamReaderstreamReader=newStreamReader(str);

byte[]bytes=newbyte[1024];

//地址名字

stringname=+".png";

stringfPath="";

//本地

stringurl="";

stringtag="";

//服务器

fPath=h("../asts/img/avatars");

url=tings["loginicon"].ToString()+name;

tag=name;

FileStreamfstr=newFileStream(fPath+"//"+name,Create,);

intlen=0;

while((len=(bytes,0,1024))>0)

{

(bytes,0,len);

}

e();

e();

();

();

tType="text/html";

result="";

}

returnresult;

}

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

的保存路径等返回到界⾯。