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 ...
随机推荐
- IOS Socket 01-网络协议基础知识
1. 网络参考模型 OSI参考模型 TCP/IP参考模型 2. 七层简述 1)物理层:主要定义物理设备标准,如网线的接 ...
- netstat 1
lsof -i :8086 第二个参数需要:开头 netstat linux -a (all)显示所有选项,默认不显示LISTEN相关 理解这个很关键, 这是为什么我们netstat -a 不显 ...
- Java基础之网络编程
网络编程:1.网络编程概述 (1)网络模型 OSI参考模型 TCP/IP参考模型 (2)网络通讯要素 IP地址 端口号 传输协议 (3)网络通讯前提: **找到对方IP **数据要发送到指定端口.为了 ...
- Linux初学 - 文件夹及文件操作
创建文件夹 mkdir 移动文件夹 mv dir1 dir2 复制文件夹 cp 删除文件夹 rm 创建文件 touch 编辑文件内容 vi /vim 查看文件内容 cat 追加文件内容 echo 复制 ...
- iOS中app启动闪退的原因
这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...
- javascript闭包学习例子
javascript中的闭包个很让人头疼的概念.总结一下 闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成 ...
- Liferay7 BPM门户开发之39: Form表单提交的ProcessAction处理
在v6.2开始后,需要设置<requires-namespaced-parameters>false</requires-namespaced-parameters> 来避免 ...
- 初了解NodeJS
发现了NodeJS以后让我有一种很激动的心情,因为它能做我以前一直想写的东西,而如果没有NodeJS我还需要去学习别的语言,但是有了NodeJS以后就可以通过Javascript来写我的程序了,不得不 ...
- JSP网站开发基础总结《十二》
前两篇已经简单为大家介绍了一下,有关Filter接口的知识,本篇就让我们以一个登录小功能,来具体实现一下过滤器的作用,便于大家掌握.具体为大家介绍一下如何使用Filter对访问进行过滤,及如何防止中文 ...
- java中同步嵌套引起的死锁事例代码
/* 目的:自己写一个由于同步嵌套引起的死锁! 思路:多个线程在执行时,某一时刻,0-Thread绑定了LockA锁,1-Thread绑定了LockB锁! 当0-Thread要去绑定LockB锁时 和 ...