asp.net mvc上传头像加剪裁功能介绍

正好项目用到上传+剪裁功能,发上来便于以后使用。

我不能告诉你们其实是从博客园扒的前台代码,哈哈。

前端是jquery+fineuploader+jquery.Jcrop

后台是asp.net mvc 4

核心的js调用代码是crop.js和helper文件夹下的ImgHandler.cs

效果图

前台代码

<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"  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"   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 });
            }
        }

时间: 2024-11-08 01:01:49

asp.net mvc上传头像加剪裁功能介绍的相关文章

asp.net mvc上传头像加剪裁功能

正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc 4 核心的js调用代码是crop.js和helper文件夹下的ImgHandler.cs 效果图 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href=

FLASH实现ASP.NET MVC上传---.NET篇

其实在.NET MVC中保存图片最大的问题不是如何保存图片.而是身份验证. 为什么这样说,在firefox和Chrome中最大的问题是,flash作为插件出现.从而形成了两个终端. 在这种情况下,不同的useragent使用了不同的Cookie. SessionID也就不同了,所以作为Session来验证用户的方式,显得有些不太可行. 那么,看下思路 修改SessionID的代码,在Global.asax中 protected void Application_BeginRequest(obje

ASP.NET图片上传,加水印文字和水印图片!

看了清清月儿的这篇文章让自己受益匪浅,但是觉得还有一些问题.上传图片后还有原来的图片文件存在,觉得这样很不爽,调用file类的delete方法删除原来没有生成水印的图片另外自己又加了一个限制图片大小的函数 1.最简单的单文件上传(没花头) 效果图:说明:这是最基本的文件上传,在asp.net1.x中没有这个FileUpload控件,只有html的上传控件,那时候要把html控件转化为服务器控件,很不好用.其实所有文件上传的美丽效果都是从这个FileUpload控件衍生,第一个例子虽然简单却是根本

ASP.NET MVC上传文件

出处:http://www.cnblogs.com/zhouhb/p/3906714.html 最近参考网络资料,学习了ASP.NET MVC如何上传文件.最基本的,没有用jQuery等技术. 1.定义Model public class TestModel    {        [Display(Name = "标题")]        [Required]        public string Title        {            get;           

ASP.NET MVC 上传文件

1.首先创建一控制器文件UpFileController.cs: using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc; namespace Mvc4Study.Controllers{ public class UpFileController : Controller { // // GET: /UpFile/ public ActionRes

ASP.NET MVC上传限制

今天快下班时候碰到个问题,系统上传附件失败,一看是用户上传了一个30M的PDF,正常思路在Web.config里面的httpruntime添加MaxRequestLength属性,并设置为最大,试了发现不行,依然上传失败.这时候再去看下ajax上传方法是不是哪里有问题,也没有,最后想到会不会是MVC的限制,百度了一下确实有这么个说法,配置如下: <security>      <requestFiltering>        <requestLimits maxAllowe

怎样解决asp.net.mvc上传附件超过长度问题?

最近,在做一个上传附件功能,但是文件超过4M,就报上传的文件超过长度问题 如何解决这个问题呢?这里我找了一下资料,了解一下问题所在,有3种解决方法 方案一:在所在项目的web.config配置文件中,修改maxRequestLength的值 方案二:在.net framework的安装目录下的machine.config配置文件,修改maxRequestLength的值 方案三:修改IIS服务的上传文件大小的限制 方案一: 1.修改web.config文件,改变这个maxRequestLengt

FLASH实现ASP.NET MVC上传---Flash篇

先看下整体思路,整个上传,以flash按钮为入口 创建Flash,添加一个按钮,并命名为btn 添加类main.as package { import flash.display.*; import flash.events.*; import flash.net.*; import flash.ui.*; import flash.external.ExternalInterface; public class main extends Sprite { public var btn:Simp

移动端 上传头像 并裁剪功能(h5)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>移动端头像图片上传裁剪</title>