asp.net MVC简单图片上传

asp.net MVC简单图片上传

01、创建控制器HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace mvcTuPianShangChuang.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult UploadImg()

        {
            //接收表单传递过来的图片
            HttpPostedFileBase file = Request.Files["imagesFile"];


            //拿到文件的扩展名
            string extName = System.IO.Path.GetExtension(file.FileName);
            if (extName != ".jpeg" && extName != ".gif" && extName != ".jpg" && extName != ".png")
            {
                //返回前一页
                return Content("<script>alert('文件格式不合适,请重新上传');history.go(-1);</script>");
            }
            //最终上传路径
            string uploadImgName = "/Upload/" + Guid.NewGuid().ToString() + file.FileName;
            //将上传的图片保存
            file.SaveAs(Request.MapPath(uploadImgName));
            //返回前一页
            return Content("<script>alert('上传成功!');history.go(-1);</script>");
        }

        //[HttpPost]
        //public ActionResult UploadImg()
        //{
        //    if (Request.Files.Count > 0)
        //    {
        //        HttpPostedFileBase f = Request.Files["file1"];
        //        f.SaveAs(@"D:\" + f.FileName);
        //    }
        //    return Content("<script>alert('上传成功!');history.go(-1);</script>");
        //    //return View();
        //}

    }
}

02创建视图Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <form action="/home/uploadimg" method="post" enctype="multipart/form-data">
            <input type="file" name="imagesFile" />
            <input type="submit" value="submit" />
        </form>


    </div>
</body>
</html>

03创建文件夹Upload
在这里插入图片描述

04预览即可

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
逐个模块给出以下说明: 一个用户只能在同一时间登陆一次,需要经过电脑ip验证,用户名和密码验证,全部通过才可以进入首页。 用户登录:首先进入首页,显示该用户今天上图片。 1.查看图片:显示该用 户上的所有图片,显示内容:图像描述,图像大小,是否验证,上时间,查看,删除 2.上图片:用户可以上图片,在上时有预览的功能,如果数据库中已存在上过的照片,则提醒用户已上,否则进入等待验证页面,等待后台验证,若验证成功则显示上的图像,如果失败则提醒用户是否继续等待验证 3.修改口令:用户可以修改自己的密码 4.退出系统:用户退出当前系统,注销 5.团队简介和客户服务主要是显示团队介绍和联系方式 管理员登陆:进入首页,显示今天上的所有图片,显示内容:编号,id,图像描述,图像大小,是否验证,上用户,ip,上时间,查看,删除 1.查看用户:显示用户名,密码,增加时间,上几张图片,删除 2.增加用户:包括用户名,密码 3.查找用户:根据输入的用户名进行模糊查询,显示内容:用户名,密码,添加时间,上几张图片,删除 4.查看所有图片:显示编号,id,图像描述,图像大小,是否验证,上用户,ip,上时间,查看,操作,其中id,图像描述,图像大小,是否验证,上用户,ip,上时间字段具有排序功能 5.查找图片:可以根据用户名和上日期进行查询 6.查看节点:显示IP地址,删除 7.增加节点:输入客户端的ip地址进行添加 8.退出系统:进行注销 9.团队简介和客户服务:主要是显示团队介绍和联系方式
要实现图片剪切,可以按照以下步骤进行: 1. 在视图中添加一个上文件的表单。 2. 在控制器中编写代码,用于将上的文件保存到服务器上。 3. 引入图片剪切插件,例如Jcrop。 4. 在视图中引入Jcrop插件,并使用JavaScript代码初始化插件。 5. 当用户完成剪切操作后,将剪切后的图片到服务器上。 以下是ASP.NET MVC实现图片剪切的示例代码: 在视图中添加上文件的表单: ``` @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="file" /> <input type="submit" value="Upload" /> } ``` 在控制器中编写代码,用于将上的文件保存到服务器上: ``` [HttpPost] public ActionResult Upload(HttpPostedFileBase file) { if (file != null && file.ContentLength > 0) { var fileName = Path.GetFileName(file.FileName); var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName); file.SaveAs(path); } return RedirectToAction("Crop"); } ``` 在视图中引入Jcrop插件,并使用JavaScript代码初始化插件: ``` <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <link href="//cdn.bootcss.com/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" /> <script src="//cdn.bootcss.com/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script> <script> $(function () { $('#cropImage').Jcrop({ aspectRatio: 1, setSelect: [0, 0, 200, 200], onSelect: function (c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); } }); }); </script> ``` 当用户完成剪切操作后,将剪切后的图片到服务器上: ``` [HttpPost] public ActionResult Crop(int x, int y, int w, int h) { var fileName = "crop_" + Guid.NewGuid() + ".jpg"; var sourcePath = Path.Combine(Server.MapPath("~/App_Data/Uploads"), "original.jpg"); var destPath = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName); using (var image = Image.FromFile(sourcePath)) using (var cropped = new Bitmap(w, h)) using (var graphics = Graphics.FromImage(cropped)) { graphics.DrawImage(image, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel); cropped.Save(destPath, ImageFormat.Jpeg); } ViewBag.ImageUrl = Url.Content("~/App_Data/Uploads/" + fileName); return View(); } ``` 注意:以上代码仅供参考,具体实现可能需要根据实际需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值