ASP.NET MVC 上传图片到项目目录中的文件夹并显示

因项目需求,需要一个上传图片并显示的功能,类似于上传头像并显示出来。查阅了网上资料,写了个Demo,希望能帮助到更多的人。此Demo基于ASP.NET MVC实现。

 选择图片:

点击按钮进行上传: 

一、先在项目中新建一个文件夹用于存放图片 

                                         

二、View页面代码 

@{Layout = null;
}<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="~/Scripts/jquery-3.3.1.min.js"></script><script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>@using (Ajax.BeginForm("", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post" }, new { enctype = "multipart/form-data", id = "FormBaseData" })){<input type="hidden" name="MouldId" id="MouldId" value="9527" /><input type="file" name="file1" /><input type="button" value="submit" id="btnSubmit" /><img src="" width="300" height="300" display:inline; alt="图片预览" id="mypicture" />}
</body>
</html><script type="text/javascript">$(document).ready(function () {$("#btnSubmit").bind("click", function () { Query(); });})function Query() {$("#FormBaseData").attr("data-ajax-success", "OnQuerySuccess(data)");$("#FormBaseData").attr("data-ajax-failure", "OnQueryFail()");$("#FormBaseData").attr("action", "/home/UploadImg");$("#FormBaseData").submit();}function OnQuerySuccess(data) {$("#mypicture").attr({ "src": data });}function OnQueryFail() {alert("发生错误!");}
</script>

三、Controller端代码 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;namespace WebApplication1.Controllers
{public class HomeController : Controller{public ActionResult Index(){return View();}[HttpPost]public ActionResult UploadImg(long MouldId){string msg = string.Empty;if (Request.Files.Count > 0){HttpPostedFileBase file = Request.Files["file1"];if (file.ContentLength < 5 * 1024 * 1024){string fileType = System.IO.Path.GetExtension(file.FileName);//获取文件类型if (!System.IO.Directory.Exists(Server.MapPath("~/Pictures/"))){System.IO.Directory.CreateDirectory(Server.MapPath("~/Pictures/"));}string filePath = Server.MapPath("~/Pictures/");//保存文件的路径if (fileType != null){fileType = fileType.ToLower();//将文件类型转化成小写if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileType)){file.SaveAs(filePath + file.FileName);string str = "Pictures/" + file.FileName;msg = str;}else{msg = "只支持图片格式";}}}else{msg= "图片大小不能超过5M";}}else{msg = "上传图片不能为空";}return Content(msg);}}
}

参考:https://blog.csdn.net/weixin_44540201/article/details/89630530

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java查询SQLServer遇到问题:对象名无效。

症状阐述:在与数据库连接成功后,使用sql语言时,出现找不到"表"对象. 原因:一般为所使用账户对数据库中的表,没有读取权限 结局办法:1、进入对象资源管理器&#xff0c;找到“安全性”-->"登录名"-->"你登陆数据库使用的账户" 2、双击找到…

sql server 按照日期自动生成单据编号的函数

一、sql server 按照日期自动生成单据编号的函数&#xff0c;格式为##08080001&#xff0c;##表示打头的单据字符&#xff0c;然后是年月和流水编号。二、传入的参数为单据的打头字符和生成单据的日期三、一般的调用格式为dbo.GetCostBillID(HP,getdate()) --按单号和年月获取单…

关于linux下制作静态库

本小测试程序是从<<linux程序设计第4版>>摘录&#xff1b; 直接入正正题&#xff1a; 我们要创建一个表态库&#xff0c;libfoo.a 所用文件: fred.c bill.c 其中fred.c代码如下&#xff1a; #include <stdio.h> void fred(int arg) { printf("f…

JQuery Datatables 实现对某一列的数据合计汇总

有两种实现方式&#xff0c;举例说明 第一种、JS代码如下&#xff1a; var table;table $(#example).DataTable({dom: Bfrtip,scrollY: true,scrollX: true,scrollCollapse: true,colReorder: true,select: true,stateSave: true,//info: false,//关闭左下角关于行数和选中的…

puppet语法学习

先讲讲shell 与puppet的不同。shell 脚本是过程式的&#xff0c;里面描述的是命令执行的过程&#xff0c;shell 通常很短&#xff0c;可以很快写出来&#xff0c;但是很快又会被抛弃&#xff0c;它常常依赖于特定操作系统环境。puppet 语言是结果式的&#xff0c;使用者将自己想…

JQuery DataTables改变行或列的背景或字体颜色

var table;table $(#example).DataTable({dom: Bfrtip,scrollY: true,scrollX: true,scrollCollapse: true,colReorder: true,select: true,stateSave: true,//info: false,//关闭左下角关于行数和选中的提示//filter: false,//关闭搜索//paging: false,//关闭分页pagingType:…

Autofac在Asp.net MVC中在 Areas拆分到不同DLL下的注入失败问题

废话不多说&#xff0c;直接上代码 public static class MvcContainer{public static IContainer Instance;public static System.Web.Mvc.IDependencyResolver Init(Func<ContainerBuilder, ContainerBuilder> func null){var builder new ContainerBuilder();//新建容…

linux学习笔记-chkconfig

功能说明&#xff1a;检查、设定系统的各种服务。语法&#xff1a;chkconfig [--add][--del][--list][系统服务]或chkconfig [--level<等级代号>][系统服务][on/off/reset]补充说明:这个是redhat公司遵循gpl规则所开发的程序,它可以查询操作系统在每一个执行等级(runleve…

JQuery Datatables 样式Style

用了这么久的datatables&#xff0c;才发现datatables有具体的样式和详细说明&#xff0c;还可以自定义配置查看。 点击这里进入datatables官网具体样式查看 一、所有的class属性及示例HTML代码写法&#xff1a; 二、 表格内样式(字体居中、居左、居右等)&#xff0c;targets代…

[笔记]极大极小过程的alpha-beta剪枝不可与记忆化搜索一起使用

今天做SGU 423&#xff0c;WA得我眼泪汪汪。后来发现原来这个问题很早就被何牛提到过&#xff1a; 极大极小过程的alpha-beta剪枝不可与记忆化搜索一起使用。 原因是这样的&#xff1a; 在一个博弈图中&#xff0c;可能存在这样的情况&#xff1a;一个状态有不止一个前继。 比如…

[转载] AUML——Schedules and Events

来源&#xff1a;http://www.auml.org/ Schedules and Events Class and Sequence Diagrams specifications Plan for Work and Milestones for the Class and Sequence Diagrams specifications: May 2003 - Initial draft of language specifications for Class and Sequenc…

JQuery Datatables 获取实例及如何进行全局设置

可以使用以下三种方法获得一个新的Datatables API实例&#xff1a; $( selector ).DataTable();$( selector ).dataTable().api();new $.fn.dataTable.Api( selector ); 可以通过以下方法进行 Datatables的全局设置 //将以下JS代码单据引入后&#xff0c;默认之后所有的datatab…

Juniper SA SSL ×××配置宁盾DKEY短信动态密码步骤

1. 方案简介 传统的双因子认证技术是基于硬件令牌方式&#xff0c;IT管理员会为每个用户分配分发一只令牌&#xff0c;用户登录时输入令牌上显示的6位随即数字&#xff0c;即可完成登录是目前最为常用的强身份认证方案&#xff0c;它最大优点在于认证响应度高&#xff0c;然而采…

JQuery Datatables Ajax dataSrc的使用

Datatables在默认Ajax的情况下&#xff0c;dataSrc会去读取名称为data属性的数组 $(#myTable).DataTable( {ajax: {url: /api/myData,dataSrc: },columns: [ ... ] } );// 或者使用标准的写法&#xff0c;指定在data中去找&#xff0c;效果和上面写法一样 $(#myTable).DataTabl…

JQuery Datatables 数据操作

DataTables有4种内置数据操作&#xff0c;每一个都可能使用正交&#xff08;独立&#xff09;数据源。这四种操作如下&#xff0c;重点看前三个。 display(string)//用于显示的数据 sort(string)//用于排序的数据 filter(string)//用于过滤的数据 type(string)//类型检测数据 比…

apache 添加下载文件头

AddType application/octet-stream .rar #windowsAddType application/octet-stream .apk #androidAddType application/octet-stream .ipa #苹果

JQuery Datatables单元格内显示数据太长,截取部分显示功能

//初始化表格 var oTable $("#example").DataTable({ajax: {url: "dataList.action",data: {args1: "我是固定传参的值&#xff0c;在服务器接收参数[args1]"}},columns: [{data: "content",render: function(data, type, row, meta)…

JQuery Datatables辅助函数

数字辅助函数。number辅助函数提供了轻松格式化数字的功能。处理数字时&#xff0c;您可能经常希望添加格式&#xff0c;前缀和后缀字符&#xff08;比如货币标示符&#xff09;&#xff0c;使用千位分隔符并制定数字的精度。使用number辅助函数可以做到这些。 数字辅助函数包含…

多表替代密码

多表替代密码转载于:https://www.cnblogs.com/LoveFishC/archive/2012/08/03/3846672.html

SqlServer用SQL语句将查出的数据直接插入到另一个张的表中

示例代码&#xff1a; INSERT INTO dbo.Barcode( BarNo ,FiscalYear ,FiscalMonth ,BarType ,ItemId ,ItemName ,WhId ,WhName ,CurrentWhId ,CurrentWhName ,ItemQty ,LotNo ,StUserId ,StUserName ,StDatetime ,RKVou ,CKVou ,DeprecatedUserId ,DeprecatedUserName ,Depre…