之前上传图片基本都是用的HttpPostedFile方式获取图片,这次因为需求关系,要对准备上传的图片进行删除,最后提交的时候才去保存图片到服务器,

找了下资料,html5有个新的东西出来,js 里面的FileReader用法也写下,有了这个可以很快速的开发一个适配的图片上传插件出来

$('#img_upload').change(function () {// img_upload 为 input 标签的id
var maxsize = 2 * 1024 * 1024;//2M
var file = this.files[0];
var size = this.files[0].size;
var suffix = file.name.split('.')[1];
// 前端初步判断下后缀名是否为图片,更为精确的方式要在服务器端进行
if (suffix.toLowerCase() != "jpg" && suffix.toLowerCase() != "jpeg" && suffix.toLowerCase() != "gif" && suffix.toLowerCase() != "png") {
alert("请上传JPG、JPEG、GIF与PNG格式的图片");
return;
} if (size >= maxsize) {
alert("上传的文件必须小于2M!!!");
return;
} var r = new FileReader();
r.readAsDataURL(file);
$(r).load(function () {
document.getElementById("avatarimg").src = this.result;// this.result 就是 data:image/jpeg;base64,开头的base64格式图片
});
});

  服务器端处理如下

    /// <summary>
/// 将 html5 FileReader 读出来的base64格式图片转化成一定格式的图片存起来
/// </summary>
/// <param name="base64Str">开头为data:image/jpeg;base64, + base64图片字符串</param>
/// <param name="domain">引用程序域名</param>
/// <param name="savePath">根目录开始的保存路径: uploadfile\\201703 不存在该路径则会自动创建 </param>
/// <param name="saveName">2017030278787.jpg 中"." 前一段</param>
/// <param name="extension">.jpg</param>
/// <param name="limitSize">限制字节长度</param>
/// <returns>1:面向用户的错误信息 </returns>
public static SaveImageResult SaveBase64StrToImage(string base64Str, string domain, string savePath, string saveName, string extension, long limitSize)
{
SaveImageResult result = new SaveImageResult();
string imgFullName = saveName + extension; // 格式类似 20170903787878.jpg
try
{
result.ReturnPath = domain + "/" + savePath.Replace("\\", "/") + "/" + imgFullName;// 格式类似 http:axx.xxx.com/uploadfile/2017/03/201709044645545454.jpg
}
catch (Exception)
{
throw new Exception("参数savePath格式错误");
}
byte[] arr = null;
try
{
arr = Convert.FromBase64String(base64Str.Substring(base64Str.IndexOf("base64,") + ));//切除前面那段image标识
}
catch (Exception)
{
throw new Exception("参数base64Str格式错误");
} long size = arr.LongLength; if (size <= limitSize)// 判断文件大小是否超出限制
{
string path = System.Web.HttpRuntime.AppDomainAppPath + savePath;// 获取物理路径 if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
} using (MemoryStream ms = new MemoryStream(arr))
{
try
{
                    Bitmap bmp = new Bitmap(ms);// 此处如果传入的不是一张图片,这里会抛异常
                    bmp.Save(path + "\\" + imgFullName);
}
catch (Exception)
{
throw new Exception("图片保存失败,请检查传入参数");
}
}
}
else
{
result.ErrorCode = ;
result.ErrorMessage = "图片超过限制大小";
}
if (result.ErrorCode != )// 如果有出错,返回路径变成空
{
result.ReturnPath = "";
}
return result;
}
    /// <summary>
/// base64格式转图片存储结果
///
/// </summary>
public class SaveImageResult
{
/// <summary>
/// 0:无错误 1:面向用户的错误信息
/// </summary>
public int ErrorCode { get; set; } /// <summary>
/// 错误信息
/// </summary>
public string ErrorMessage { get; set; } /// <summary>
/// 返回用于存储的路径
/// </summary>
public string ReturnPath { get; set; } }

 
 

base64方式讲完,下面再附上一个普通的HttpPostedFile方式上传的方法

/// <summary>
/// 保存上传的图片,自带用Image对象的方式判断是否为图片,自动获取后缀名
/// </summary>
/// <param name="file">文件 ,该参数可由System.Web.Request.Files集合的索引来得到</param>
/// <param name="savePath">根目录开始的保存路径: uploadfile\\201703 不存在该路径则会自动创建 </param>
/// <param name="saveName">2017030278787.jpg 中"." 前一段</param>
/// <param name="limitSize">限制字节长度</param>
/// <returns></returns>
public static SaveImageResult SaveImage(System.Web.HttpPostedFile file, string domain, string savePath, string saveName, long limitSize)
{
SaveImageResult result = new SaveImageResult();
if (file == null)
{
result.ErrorCode = ;
result.ErrorMessage = "请上传图片";
}
string extension = System.IO.Path.GetExtension(file.FileName);// 获取后缀名
string imgFullName = saveName + extension; // 格式类似 20170903787878.jpg
try
{
result.ReturnPath = domain + "/" + savePath.Replace("\\", "/") + "/" + imgFullName;// 格式类似 http:app.darchin.com/uploadfile/2017/03/201709044645545454.jpg
}
catch (Exception)
{
throw new Exception("参数savePath格式错误");
}
if (file.ContentLength <= limitSize)// 判断文件大小是否超出限制
{
System.Drawing.Image img = null;
try
{
img = System.Drawing.Image.FromStream(file.InputStream);
}
catch (Exception)
{
result.ErrorCode = ;
result.ErrorMessage = "请上传正确格式的图片";
} string path = System.Web.HttpRuntime.AppDomainAppPath + savePath;// 获取物理路径 if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
try
{
img.Save(path + "\\" + imgFullName);
}
catch (Exception)
{
throw new Exception("图片保存失败,请检查传入参数");
} }
else
{
result.ErrorCode = ;
result.ErrorMessage = "上传的图片超过限制大小";
}
if (result.ErrorCode != )// 如果有出错,返回路径变成空
{
result.ReturnPath = "";
}
return result;
}

如果上面所讲有错或者不足的地方还请各位朋友指出,感激不尽

Asp.Net HttpPostedFile和base64两种上传图片(文件)方式的更多相关文章

  1. Git 的两种忽略文件方式 gitignore 和 exclude

    Git 的两种忽略文件方式 gitignore 和 exclude .gitignore 不用说了,大家都知道. 有一个 exclude 可能接触比较少. 知道这个功能后发现,用在服务器上非常方便,因 ...

  2. Asp.Net Core下的两种路由配置方式

    与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...

  3. ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...

  4. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

  5. Form表单中method=post/get两种数据传输的方式的区别

    Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...

  6. ASP.NET MVC下的四种验证编程方式[续篇]【转】

    在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...

  7. ASP.NET MVC下的四种验证编程方式【转】

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...

  8. Windows Azure VM的两种shut down 方式

    今天在调查Azure的价格时,发现下面的语句,来自http://azure.microsoft.com/en-us/pricing/details/virtual-machines/ * If my ...

  9. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

随机推荐

  1. javaScript事件(七)事件类型之键盘与文本事件

    键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...

  2. (3).NET CORE微服务 Micro-Service ---- Consul服务治理

    Consul是注册中心,服务提供者.服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离. 除了Consul之外,还有Eureka.Zookeeper等类似软件 ...

  3. bzoj 5099: [POI2018]Pionek

    题解: 还是比较简单的一道题 考虑现在有一个向量,当且仅当下一个向量与它夹角<90度这个向量的模长才会增加 接下来怎么做呢 如果我们去枚举初始向量,向量方向会随着新增向量而变化 随着不断顺时针的 ...

  4. alpha冲刺6/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...

  5. net core体系-web应用程序-4net core2.0大白话带你入门-6asp.net core配置文件

    asp.net core配置文件   读取配置文件 asp.net core使用appsettings.json代替传统.net framework的web.config中的<appSettin ...

  6. Codeforces 725E Too Much Money (看题解)

    Too Much Money 最关键的一点就是这个贪心可以在sqrt(n)级别算出答案. 因为最多有sqrt(n)个不同的数值加入. 我们可以发现最优肯定加入一个. 然后维护一个当前可以取的最大值, ...

  7. 今天开始学习php,粘一些重点放这以便查看记忆。

    1.PHP的变量用$定义. PHP 将所有全局变量存储在一个名为 $GLOBALS[index] 的数组中. index 保存变量的名称.这个数组可以在函数内部访问,也可以直接用来更新全局变量. 2. ...

  8. Flask---第二个例子--Get和POST发送

    *get:浏览器告诉服务器,我只需要获取页面信息给我,这是最简单最常用的方法 *Post:览器告诉服务器:想在 URL 上 发布 新信息.并且,服务器必须确保 数据已存储且仅存储一次.这是 HTML ...

  9. Raspberry Camera详解+picamera库+Opencv控制

    使用树莓派的摄像头,将树莓派自身提供的picamera的API数据转换为Python Oencv可用图像数据: # import the necessary packages from picamer ...

  10. Vue 中 computed、watch对比

    computed:就像调用VUE的DATA一样 watch的对比 :监听事件