uploader秒传图片到服务器方法详解

先看看效果图：

页面中js部分

页面初始化的一些操作：

html布局，比较简单，模仿微信的：

<p class="dynamic_images"> 
 <ul> 
 <!--<li><img src="images/cbd.jpg"></li>--> 
 <li><img src="images/iconfont-tianjia.png" id="addnew"></li> 
 <!--<li><span class="mui-icon iconfont icon-jia2" style="font-size: 28px;"></span></li>--> 
 
 </ul> 
</p>

服务端asp.net版

string file = ""; 
int count = Request.Files.Count; 
 
for (int i = 0; i < count; i++) 
{ 
 int l = Request.Files["uploadkey" + (i + 1)].ContentLength; 
 byte[] buffer = new byte[l]; 
 Stream s = Request.Files["uploadkey" + (i + 1)].InputStream; 
 System.Drawing.Bitmap image = new System.Drawing.Bitmap(s); 
 string imgname = Common.GetGuid() + ".jpg"; 
 string path = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/"; 
 if (!Directory.Exists(HttpContext.Current.Server.MapPath(path))) 
 { 
 System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path)); 
 } 
 image.Save(Server.MapPath(path + "/" + imgname)); 
}

速度非常快，测试过，如果不压缩速度没有明显的下降，但是考虑到显示时候加载的问题，还是进行了压缩。

后补的CSS，其实没什么样式的：

<style type="text/css"> 
 .dynamic_images { 
 width: 100%; 
 } 
 
 .dynamic_images ul { 
 margin: 0; 
 padding: 0; 
 } 
 
 .dynamic_images ul li { 
 float: left; 
 list-style: none; 
 width: 25%; 
 } 
 
 .dynamic_images ul li img { 
 width: 98%; 
 height: 80px; 
 } 
</style>

加号是字体：http://iconfont.cn/
头部样式是二次修改HB的样式，如果你不是用HB开发的话，自己写CSS就行了。