• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    实现Asp.net mvc上传头像加剪裁功能

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

    本文主要介绍了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上传头像加剪裁功能的部分代码,小编分享给大家参考,希望对大家的学习有所帮助。

    您可能感兴趣的文章:
    • web前端开发upload上传头像js示例代码
    • php视频拍照上传头像功能实现代码分享
    • php+js iframe实现上传头像界面无跳转
    • JS仿flash上传头像效果实现代码
    • 浅析上传头像示例及其注意事项
    上一篇:ASP.NET中Cookie的用法实例分析
    下一篇:ASP.NET MVC3网站创建与发布(1)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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