这几天需要实现上传图片到服务器,百度了很多,最终实现了。现在记录一下。
html 代码
<div class=\"row cl\"><label class=\"form-label col-xs-4 col-sm-2\"><span class=\"c-red\">*</span>图片:</label><div class=\"formControls col-xs-8 col-sm-9\"><input type=\"file\" id=\"image\"/><img src=\"~/Content/upload-image/1.jpg\" id=\"image_show\" style=\"width:150px;\"/></div></div>
javascript代码(发送给服务器)
// 将选择的图片显示出来。 当输入框改变时触发// 此时,<Img>中的src存放的是base64 编码的图片,是一串字符,我们可以把它发送给服务器,服务器解码,然后保存到服务器本地,而数据库存储的则是服务器本地的路径。$(\"#image\").change(function () {console.log($(\"#image\"))var file = $(\"#image\").get(0).files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {// 图片格式为 base64//console.log(e)$(\"#image_show\").attr(\"src\", e.target.result);}})
服务器解码
- 我是写在controller中的
需要用到这两个:
- using System.Drawing;
- using System.IO;
string base64 = image.Split(\',\')[1];//规范化,逗号前面的是标识符,用于说明原图片的名字和格式string path = Server.MapPath(\"/\");//获取网站的根路径string datetime = GetTimeStamp();string suffix = \".jpg\"; //文件的后缀名根据实际情况string strPath = path + \"\\\\content\\\\upload-image\\\\\" + datetime + suffix;MemoryStream stream = new MemoryStream(Convert.FromBase64String(base64));Bitmap bit=new Bitmap(stream);bit.Save(strPath);//保存到本地
public string GetTimeStamp(){TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);return Convert.ToInt64(ts.TotalMilliseconds).ToString();}
效果
- 前端
- 后端