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 ...
随机推荐
- Ubuntu下解决adb devices:???????????? no permissions的方法
之前一直都是在windows下进行开发的,但是这次由于一个小模块用的东西只能在linux下运行,所以就发生了这么一系列的问题环境:虚拟机Vmware下的Ubuntu12.10事件:连接android手 ...
- 细说.NET中的多线程 (三 使用Task)
上一节我们介绍了线程池相关的概念以及用法.我们可以发现ThreadPool. QueueUserWorkItem是一种起了线程之后就不管了的做法.但是实际应用过程,我们往往会有更多的需求,比如如果更简 ...
- 如何在施工物料管理Web系统中处理大量数据并显示
最近在开发施工物料管理系统,其中涉及大量的物料信息需要管理和汇总,数据量非常庞大.之前尝试自己通过将原始数据,加工处理建模,在后台代码中通过分组.转置再显示到 Web 页面中,但自己编写的代码量非常大 ...
- 使用EntityFramework的烦恼
我有一个应用程序,是实现数据ETL同步的,即把数据从一个db里抽取出来,经过处理后,存储到另一个db里. O/RM采用的是EF db First. 随着项目程序的开发,EF的不足越来越明显. ● 根据 ...
- Redis集群~StackExchange.Redis(10月6号版1.1.608.0)连接Twemproxy支持Auth指令了
回到目录 对于StackExchange.Redis这个驱动来说,之前的版本在使用Proxy为Twemproxy代理时,它是不支持Password属性的,即不支持原始的Auth指令,而我也修改过源代码 ...
- [常见问题]Project facet Java versin 1.8 is not support.
发生这个问题的原因是我们的java编译环境(JDK版本),与tomcat运行环境(JDK或JRE版本)不一致导致的. 到eclipse的设置中找到compile项(或右键项目进入),看一下编译环境的J ...
- 关于 fir.im 你可能不知道的实用小工具
大家可能都知道 fir.im 是做测试发包的,上传你的 IPA/APK, 测试用户可以通过一个短链接和二维码就可快速安装测试. 除了基本的发包功能即应用上传下载外,fir.im 还为提高发包体验提供了 ...
- IOS笔记045-UIDatePicker和UIPickerView
这是两种可以上下滚动的控件. 这是UIDatePicker,可以显示日期和时间. 这个是UIPickerView,显示类似几个选择项的界面. 注意点:PickerView的高度不能改,默认162,Pi ...
- Django ORM - 001 - 外键表查询主表信息
开始用Django做web开发,我想大家都会遇到同样的问题,那就是如何高效快速的查询需要的数据,MVC都很简单,但是ORM折腾起来就有些费时间,我准备好好研究下Django ORM,所以会有一个系列的 ...
- Design3：使用HierarchyID构建数据的分层结构
1,传统的分层结构是父子结构,表结构中有一个ParentID字段自引用表的主键,表示“归属”关系,例如 create table dbo.emph ( ID int not null primary ...