时间:2021-07-01 10:21:17 帮助过:17人阅读
先看看效果图:
页面中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就行了。
相关推荐:
实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器
实例详解微信小程序上传图片到服务器
js实现图片粘贴上传到服务器并展示的实例
以上就是uploader秒传图片到服务器的详细内容,更多请关注Gxl网其它相关文章!