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 ...
随机推荐
- atitit 短信验证码的源码实现 .docx
atitit 短信验证码的源码实现 .docx 参考 Atitit usrQBM1603短信验证码规范1 主要方法1 源码实现1 参考 Atitit usrQBM1603短信验证码规范 主要方法 L ...
- fir.im Weekly - 2015 年开发者调查报告
终于一脚迈入了 2016 年.无论你是否准备好,未来已经汹涌扑来-- 新年第一期的 fir.im Weekly 干货颇多,来看一看:) 2015 Developer Survey stackoverf ...
- salesforce 零基础开发入门学习（二）变量基础知识，集合，表达式，流程控制语句
salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex语言和java很多的语法类似,今天总结的是一些简单的Apex的变量等知识. 有如下几种常 ...
- :after和:before炫酷用法总结
引入 提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:first-child.nth-child ...
- MemCached add命令的用法详解
增加: add 往内存增加一条数据 命令格式: add key flag expiretime bytes\r\n data\r\n //跨行所加的一些数据 1)key: 给这个值起一个固定的名字 / ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- php技术之路
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- 用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片
用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片 ticons的用法可以百度 这里记录下具体的编译方法 在安装了ticons和ImageMagickDisp ...
- Robot Framework自动化测试（六）--- robotremoteserver使用
robotremoteserver 是什么? Python Remote Server for Robot Framework 下载地址:https://pypi.python.org/pypi/ro ...
- Android中自定义属性（attrs.xml，TypedArray的使用）
做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了.那么如何才能做到像官方 ...