c# .net 上传图片到服务器

这几天需要实现上传图片到服务器,百度了很多,最终实现了。现在记录一下。

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();
}

效果

  • 前端
    在这里插入图片描述
  • 后端
    在这里插入图片描述
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值