ASP.NET MVC 网站开发总结（三） ——图片截图上传
本着简洁直接，我们就直奔主题吧，这里需要使用到一个网页在线截图插件imgareaselect（请自行下载）。
前台页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/imgareaselect-default.css" />
</head>
<body style="text-align:center;margin-top:200px;">
<img id="preview_img" class="update-pic" src="img/default.jpg" />
<form action="/User/UpdatePic" method="post" enctype="multipart/form-data" onsubmit="return Checkform()">
<input type="hidden" id="x1" name="x1" value="0" />
<input type="hidden" id="y1" name="y1" value="0" />
<input type="hidden" id="x2" name="x2" value="0" />
<input type="hidden" id="y2" name="y2" value="0" />
<input type="file" name="pictureFile" id="pictureFile" style="display:none;" value="" onchange="SelectPicture();" />
<div class="form-group text-center">
<button type="button" class="templatemo-white-button" onclick="document.getElementById('pictureFile').click();">选择</button>
<button type="submit" class="templatemo-blue-button">提交</button>
</div>
</form>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
var img = new Image();
var imgWidth = 0;
var imgHeight = 0; InitPicture();//初始化图片 function Checkform()
{
//检查是否合法
//...
return false;
} //选择和设置图片
function SelectPicture() {
var pic = document.getElementById("pictureFile");
if (pic.value == "") {
return false;
}
//筛选图片
var strs = pic.value.split(".");
var fileExt = strs[strs.length - 1].toLowerCase();
if (fileExt != "jpg" && fileExt != "png") {
alert("错误提示:选择的文件格式不正确!");
return false;
}
//设置图片
var url = getFileUrl("pictureFile");
document.getElementById("preview_img").src = url;
img.src = url;
img.onload = function () {
if (this.width > this.height) {
imgWidth = 280;
imgHeight = parseInt(280 * (this.height / this.width));
document.getElementById("preview_img").style.width = "280px";
document.getElementById("preview_img").style.height = imgHeight + "px";
}
else {
imgHeight = 280;
imgWidth = parseInt(280 * (this.width / this.height));
document.getElementById("preview_img").style.height = "280px";
document.getElementById("preview_img").style.width = imgWidth + "px";
}
InitPicture();
};
} //初始化图片
function InitPicture() {
$('#preview_img').imgAreaSelect({
minWidth: 50,//最小宽度
minHeight: 50,//最小高度
aspectRatio: '1:1',//宽高之比1:1
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);//绑定选中的值
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
} //获取本地图片的url
function getFileUrl(sourceId) {
var url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
url = document.getElementById(sourceId).value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
</script>
</body>
</html>
要使用imgareaselect插件上传文件主要要引入了imgareaselect-default.css、jquery.imgareaselect.pack.js以及jquery-2.1.1.min.js三个文件。
图片呈现在页面上进行了等比例的放缩（长或宽放缩为280px）。
页面效果图：
后台处理代码：
//更新用户头像
[HttpPost]
public ActionResult UpdatePicture(int x1, int y1, int x2, int y2, HttpPostedFileBase pictureFile)
{
if (pictureFile != null && pictureFile.ContentLength > )
{
if (pictureFile.ContentLength > )
{
return Content("<script>alert('错误提示:文件大小超出指定范围!');</script>");
}
string fileName = pictureFile.FileName.Split('\\').Last();
string fileExt = fileName.Substring(fileName.LastIndexOf('.')).ToLower();
if (fileExt == ".jpg" || fileExt == ".png")
{
string path = Server.MapPath("~/Resources/HeadPicture");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
fileName = DateTime.Now.ToFileTime().ToString() + Guid.NewGuid().ToString("N") + fileExt;
var picPath = Path.Combine(path, fileName);
pictureFile.SaveAs(picPath);//从客户端保存文件到本地 //检查裁剪图片是否合法并裁剪图片
var image = new WebImage(picPath);
double height = image.Height;
double width = image.Width;
if (width > height)
{
height = (int)( * (height / width));
width = ;
}
else
{
width = (int)( * (width / height));
height = ;
}
image.Resize((int)width, (int)height);//调整图片大小 var length = x2 - x1;
if (x1 >= && x1 <= && y1 >= && y1 <= && length >= && length <= && x1 + length <= width && y1 + length <= height)
{
image.Crop(y1, x1, (int)(height - y1 - length), (int)(width - x1 - length));
image.Save(picPath);
var logined = entity.Users.Find(Convert.ToInt32(User.Identity.Name));
logined.Picture = fileName;
entity.SaveChanges();
return Content("<script>alert('操作成功提示:成功更新照片!');</script>");
}
else
{
System.IO.File.Delete(picPath);
return Content("<script>alert('错误提示:上传的图片信息不合法!');</script>"); }
}
else
{
return Content("<script>alert('错误提示:上传的文件格式不正确!');</script>");
}
}
else
{
return Content("<script>alert('错误提示:上传的文件是空文件!');</script>");
}
}
上面代码是一个用户头像更新的代码，也是先将图片等比例放缩（长或宽放缩为280px），也前台页面上面的图片相对应，然后再进行裁剪。
第一次团队合作ASP.NET MVC 网站开发总结就到这里吧。
<我的博客主页>:http://www.cnblogs.com/forcheng/
ASP.NET MVC 网站开发总结（三） ——图片截图上传的更多相关文章
- ASP.NET MVC 网站开发总结（一）
历经一个多月的努力,工作室的门户网站(http://www.wingstudio.org)终于结束了内部公测. 仔细算一下,大概把网站开发出1.0版本大概用了一个月的时间(主要是利用课余时间),其后大 ...
- ASP.NET MVC 网站开发总结（二）——一个或多个文件的异步或同步上传
简而言之,直接用代码展示如何实现文件的上传,这里需要使用到一个bootstrap的文件上传插件File Input(请自行下载). 前台页面: <!----> <!DOCTYPE h ...
- ASP.NET MVC 网站开发总结（四）——校友平台开发总结
又历经一个多月的努力,学校的一个校友平台项目也接近内测的尾声了,简单的总结一下这次的项目开发. 与上次做Wing工作室的门户网站相比,同样是团队开发,参与的人员多了一个,用的时间也差不多一个月,但从总 ...
- ASP.NET MVC 网站开发总结（六）——简谈Json的序列化与反序列化
首先,先简单的谈一下什么是序列化与反序列化,序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通 ...
- ASP.NET MVC 网站开发总结（七）——C#操作图片：多张图的拼接（旋转）
其实用C#来操作图片的拼接就是在用Graphic画图.个人感觉还是挺有趣的,各种类库提供了丰富多彩的功能. 源代码(移植到一个简单的C#程序中,并没有放在ASP.NET项目中): using Syst ...
- ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件
ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction&qu ...
- SpringBoot整合WEB开发--（三）文件上传
文件上传: Java中文件上传一共涉及到两个组件,CommonsMultipartResolver和StandardServletMultipartResolver,其中CommonsMultipar ...
- 在MVC应用程序中，怎样删除上传的文件
在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET ...
随机推荐
- 连接池技术 Connection Pooling
原创地址:http://www.cnblogs.com/jfzhu/p/3705703.html 转载请注明出处 和数据库建立一个物理连接是一个很耗时的任务,所以无论是ADO.NET还是J2EE都提供 ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
- location.href 一个小注意
项目里有location.href = '#......'这一类的代码,一直以为某处做了特殊处理,变成前面有主机名的URL,看架构源码也没找到这种处理.今天灵光一现,自己是被JS高程将解位置方法那节给 ...
- Java中equals与==和comparaTo的区别
一.先说说Java中equals和==的区别: Java中的数据类型,可分为两类: 1.基本数据类型(也叫原始数据类型) 八大基本数据类型 char byte short int long doubl ...
- Sublime Text配置Python开发利器
Sublime Text配置Python开发利器 收好了 自动提示 jedi 代码格式化 Python PEP8 autoformat 如果还需要在shell中搞搞研究的话,ipython将是很好的选 ...
- Design2：数据层次结构建模之二
MSSql提供了一个新的数据类型 HierarchyID,用来处理层次结构的数据,这个数据类型是系统内置的CLR数据类型,不需要专门激活 SQL/CLR 功能即可使用.当需要表示各值之间的嵌套关系,并 ...
- WEBAPP开发技巧(手机网站开发注意事项)
以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...
- CSS3入门之文本与字体
1.CSS3文本效果 1.1.text-shadow文本阴影 语法:text-shadow: h-shadow v-shadow blur color;(<水平阴影>,<垂直阴影&g ...
- Java多线程系列--“JUC集合”01之 框架
概要 之前,在"Java 集合系列目录(Category)"中,讲解了Java集合包中的各个类.接下来,将展开对JUC包中的集合进行学习.在学习之前,先温习一下"Java ...
- Yii2的深入学习--自动加载机制
Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个 ...