实现Asp.net mvc上传头像加剪裁功能

   2015-08-13 0
核心提示:这篇文章主要介绍了实现Asp.net mvc上传头像加剪裁功能,需要的朋友可以参考下

在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐?

本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考。具体如下: 

运行效果截图如下:

实现Asp.net mvc上传头像加剪裁功能

具体代码如下:

前台代码

<link href="~/Content/fineuploader.css" rel="stylesheet" />
<link href="~/Content/jquery.Jcrop.min.css" rel="stylesheet" />
<link href="~/Content/crop.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.fineuploader-3.1.min.js"></script>
<script src="~/Scripts/jquery.Jcrop.min.js"></script>
<script src="~/Scripts/crop.js"></script>

<div id="jquery-wrapped-fine-uploader"></div>
 <div id="message"></div>
 <div id="crop_wrap">
  <div id="crop_holder">
   <div id="crop_area" class="border">
    <img id="crop_image" alt="" src="" class="preview-image" style="display: none" />
   </div>
   <div id="preview_area">
    <div id="preview_title">当前头像</div>
    <div id="preview_large_text" class="preview-text">180px × 180px</div>
    <div id="preview_large_wrap" class="border">
     <img id="preview_large" alt="" src="@ViewBag.Path" class="preview-image" style=""/></div>
   </div>
  </div>
  <div id="crop_operation" style="display: none;">
   <form id="form_crop" action="/home/index" method="post">
    <input type="hidden" name="x" id="x">
    <input type="hidden" name="y" id="y">
    <input type="hidden" name="w" id="w">
    <input type="hidden" name="h" id="h">
    <input type="hidden" name="imgsrc" id="imgsrc">
    <input id="crop_operation_submit" type="submit" value="裁切并保存" /><span id="crop_operation_msg" style="display: none" class="green"></span>
   </form>
  </div>
  <div id="croped_message" class="green"></div>
 </div>

后台代码

public ActionResult Index()
  {
   return View();
  }

  /// <summary>
  /// 保存缩略图
  /// </summary>
  /// <param name="form"></param>
  /// <returns></returns>
  [HttpPost]
  public ActionResult Index(FormCollection form)
  {
   int x = Convert.ToInt32(form["x"]);
   int y = Convert.ToInt32(form["y"]);
   int w = Convert.ToInt32(form["w"]);
   int h = Convert.ToInt32(form["h"]);
   string imgsrc = form["imgsrc"].Substring(0, form["imgsrc"].LastIndexOf(""));
   string path = ImgHandler.CutAvatar(imgsrc, x, y, w, h);

   //保存Path
   
   ViewBag.Path = path;
   return View();
  }

  /// <summary>
  /// 上传头像
  /// </summary>
  /// <param name="qqfile"></param>
  /// <returns></returns>
  [HttpPost]
  public ActionResult ProcessUpload(string qqfile)
  {
   try
   {
    string uploadFolder = "/Upload/original/" + DateTime.Now.ToString("yyyyMM") + "/";
    string imgName = DateTime.Now.ToString("ddHHmmssff");
    string imgType = qqfile.Substring(qqfile.LastIndexOf("."));
    string uploadPath = "";
    uploadPath = Server.MapPath(uploadFolder);
    if (!Directory.Exists(uploadPath))
    {
     Directory.CreateDirectory(uploadPath);
    }
    using (var inputStream = Request.InputStream)
    {
     using (var flieStream = new FileStream(uploadPath + imgName + imgType, FileMode.Create))
     {
      inputStream.CopyTo(flieStream);
     }
    }

    return Json(new { success = true, message = uploadFolder + imgName + imgType });
   }
   catch (Exception e)
   {
    return Json(new { fail = true, message = e.Message });
   }
  }

以上就是实现Asp.net mvc上传头像加剪裁功能的部分代码,小编分享给大家参考,希望对大家的学习有所帮助。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • [VB][ASP.NET]FileUpload控件「批次上传 / 多档
    FileUpload控件「批次上传 / 多档案同时上传」的范例 (VB语法) http://www.dotblogs.com.tw/mis2000lab/archive/2008/05/14/3986.aspx    FileUpload控件真的简单好用,不使用它来作批次上传,却要改用别的方法,实在不聪明。要用就一次用到底,公开File
    02-10
  • 使用WebClient自动填写并提交ASP.NET页面表单的源代码
    使用WebClient自动填写并提交ASP.NET页面表单的
    转自:http://www.cnblogs.com/anjou/archive/2007/03/07/667253.html 在.NET中通过程序填写和提交表单还是比较简单。比如,要提交一个如下图所示的登录表单:           填写和提交以上表单的代码如下:       // 要提交表单的URI字符串
    02-09
  • asp.net mvc多条件+分页查询解决方案
    


            
asp.net mvc多条件+分页查询解决方案
    asp.net mvc多条件+分页查询解决方案
    http://www.cnblogs.com/nickppa/p/3232535.html开发环境vs2010css:bootstrapjs:jquery    bootstrap paginator原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了MVC多条件+分页查询因为美工不是很好,所以用的是
    02-09
  • ASP.NET操作Cookies的问题(Bug or Not)
    以下存和取都是在不同的页面中,如果是在同一个页面也没必要用cookies了。 Test1: 给Cookies赋值: const string AAA="aaa"; Response.Cookies[AAA].Value = "111;222;333"; 取值: string value = Request.Cookies[AAA].Value; // value为111 Test2: 给Cooki
    02-09
  • Asp.Net Core 自定义验证属性
      很多时候,在模型上的验证需要自己定义一些特定于我们需求的验证属性。所以这一篇我们就来介绍一下怎么自定义验证属性。  我们来实现一个验证邮箱域名的自定义验证属性,当然,最重要的是需要定义一个继承自ValidationAttribute的类,然后在实现其IsVal
    02-09
  • Asp.Net 之 枚举类型的下拉列表绑定
    有这样一个学科枚举类型:/// 学科 /// /summary public enum Subject {None = 0,[Description("语文")]Chinese = 1,[Description("数学")]Mathematics = 2,[Description("英语")]English = 3,[Description("政治")]Politics = 4,[Description("物理&qu
    02-09
  • [ASP.NET笔记] 1.Web基础知识
         1:http协议:     2:web服务器:     3:静态网页的概念     4:动态网页的概念       http协议:http(hypertext transfer protocol) 即超文本传输协议,这个协议是在internet上进行信息传送的协议任何网页之间要相互沟通,必须要尊循
    02-09
  • ASP.NET邮件发送 .net 发送邮件
      今天做了个ASP.NET做发送邮件功能,发现QQ邮箱好奇怪,当你用QQ邮箱做服务器的时候什么邮件都发送不出去(QQ邮箱除外)。而且爆出这样的错误:"邮箱不可用。 服务器响应为: Error: content rejected.http://mail.qq.com/zh_CN/help/content/rejectedmail.ht
    02-09
  • 由ASP.NET Core根据路径下载文件异常引发的探究
    前言    最近在开发新的项目,使用的是ASP.NET Core6.0版本的框架。由于项目中存在文件下载功能,没有使用类似MinIO或OSS之类的分布式文件系统,而是下载本地文件,也就是根据本地文件路径进行下载。这其中遇到了一个问题,是关于如何提供文件路径的,通
    02-09
  • ASP.NET的运行原理与运行机制 ASP.NET的开发模式包括
    ASP.NET的运行原理与运行机制 ASP.NET的开发模
    在Asp.net4和4.5中,新增了WebPages Framework,编写页面代码使用了新的Razor语法,代码更加的简洁和符合Web标准,编写方式更接近于PHP和以前的Asp,和使用WebForms这种模仿Windows Form编程方式有了很大不同,不再有大量控件和控件生成的大量不够灵活的代码
    02-09
点击排行