在ASP.NET MVC下有关上传图片脏数据的解决方案
在"在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中,已经实现了在客户端和服务端限制图片大小和格式,以及在服务端裁剪图片。但还有一个重要的话题是需要面对的,那就是图片脏数据问题。
假设用户添加产品信息,并且上传了图片,可之后用户没有点击页面上的添加按钮,这就导致上传图片成为"脏数据",存在着却一直不会被使用。解决这个问题的大致思路是:
○ 在上传图片的时候,把图片保存到一个临时文件夹,或者叫缓存文件夹
○ 当用户真正保存的时候,再把临时文件夹的图片拷贝到最终目标文件夹
假设,有这样的一个Model,它的ImageUrl属性,用来存放图片真正的相对路径。
public class ImgVm{[Required(ErrorMessage = "必填")]public string ImageUrl { get; set; }}
在HomeController中,存在如下的一些Action:
○ 提供一个显示上传页面的Action,并且是ImgVm类型的强类型视图,ImgVm的ImageUrl属性用来存放上传图片的相对路径
○ 提供一个接收ImgVm类型的Action,把临时文件夹内的图片复制到目标文件夹内,并且给ImgVm的ImageUrl属性赋上新的图片相对路径
public ActionResult Index(){return View(new ImgVm());}[HttpPost]public ActionResult Index(ImgVm imgVm){if (ModelState.IsValid){//目标文件夹路径string pathForRealSaving = Server.MapPath("~/RealUpload/");//目标文件夹内的用户文件夹路径string pathForRealUserSaving = Server.MapPath("~/RealUpload/User001/");//当前文件路径string existingFilePath = Server.MapPath(imgVm.ImageUrl);//当前文件名,根据文件路径获得string existingFileName = Path.GetFileName(existingFilePath);if (CreateFolderIfNeeded(pathForRealSaving)){if (CreateFolderIfNeeded(pathForRealUserSaving)){//根据当前文件路径获取当前文件var existingfile = Path.GetFullPath(existingFilePath);//获取目标文件夹内的目标文件var realfile = Path.Combine(pathForRealUserSaving, existingFileName);//把临时文件内的图片复制到目标文件夹内System.IO.File.Copy(existingfile, realfile, true);//保存新的图片相对路径imgVm.ImageUrl = "RealUpload/User001/" + existingFileName;}}return View("showimg", imgVm);}else{return Index(imgVm);}}
Home/Index.cshtml中多了在上传图片成功后给id为ImageUrl隐藏域赋值的部分。
@model MvcApplication10.Models.ImgVm@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">#msg {color: red;}</style>@using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "addForm", @class = "form-horizontal"})){<input name="file" id="file" size="27" type="file" /><img src="~/images/ajax-loader.gif" id="indicator" style="display: none;" /><br /><div id="imgArea"><table id="tbl"><tbody></tbody></table></div><div><span id="msg"></span></div><div>@Html.HiddenFor(m => m.ImageUrl)<input type="submit" value="提交"/></div>}@section scripts{<script src="~/Scripts/checkFileTypeAndSize.js"></script><script type="text/javascript">$(function() {$("#file").checkFileTypeAndSize({allowedExtensions: ['jpg','jpeg','gif','png'],maxSize: 1024, //最大允许1024KB,即1MBsuccess: function () {//显示进度提示$('#indicator').css("display", "block");//清空提示内容$('#msg').text('');if ($('#fn').text().length > 0) {//删除图片deleteImg();}//上传文件数据准备var fd = new FormData();fd.append('image', $('#file')[0].files[0]);$.ajax({url: '@Url.Action("UploadFile", "Home")',type: "POST",data: fd,contentType: false,cache: false,processData: false,dataType: 'json',success: function (data) {//隐藏进度提示$('#indicator').css("display", "none");if (data.isvalid) {//$('#fileTemplate').tmpl(data).appendTo('#imgArea');createTableTr();$('#thumb').attr('src', data.filepath);$('#fn').text(data.filename);//清空上传文件框内容$('#file').val('');//给隐藏域赋值$('#ImageUrl').val(data.filepath);} else {$('#msg').text(data.message);}}});},extensionerror: function () {//alert('允许的格式为:jpg,jpeg,gif,png');$('#msg').text('允许的格式为:jpg,jpeg,gif,png');return;},sizeerror: function () {//alert('最大尺寸1024KB,即1MB');$('#msg').text('最大尺寸1024KB,即1MB');return;}});});//删除图片function deleteImg() {$.ajax({cache: false,url: '@Url.Action("DeleteFileByName", "Home")',type: "POST",data: { smallname: $('#fn').text() },success: function (data) {if (data.msg) {$('#fn').parent().parent().remove();}},error: function (jqXhr, textStatus, errorThrown) {alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");}});}//创建表格function createTableTr() {var table = $('#tbl');table.append("<tr><td><img id='thumb' /></td><td colspan='2'><span id='fn'></span></td></tr>");}</script>}
还有一个Home/showimg.cshtml视图,用来显示新的(相对临时文件夹中的那张图片)图片。
@model MvcApplication10.Models.ImgVm@{ViewBag.Title = "showimg";Layout = "~/Views/Shared/_Layout.cshtml";}<h2>showimg</h2><img src="@Model.ImageUrl"/>
当然,存放上传图片的临时文件夹是可以随时清理的。
在ASP.NET MVC下有关上传图片脏数据的解决方案的更多相关文章
- SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在 asp.net MVC下使用步骤
mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下,希望大家少走弯路. 1.首先我们先下载net版本的uediot 2.然后把整个文档拷贝到我们的项目中,记得是整个 把下载的文 ...
- ASP.NET MVC下的四种验证编程方式[续篇]
在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...
- ASP.NET MVC下的四种验证编程方式
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...
- Response.End()在Webform和ASP.NET MVC下的表现差异
前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...
- ASP.NET MVC下的四种验证编程方式[续篇]【转】
在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...
- ASP.NET MVC下的四种验证编程方式【转】
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...
- ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text
前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...
- ASP.NET MVC下使用AngularJs语言(五):ng-selected
这次学习ng-selected语法,这个是为DropDownList下拉列表显示默认选项. 演示从下面步骤开始 1,新建一个model: 上面#14行代码的property,数据类型为bool.即是存 ...
- ASP.NET MVC下使用AngularJs语言(二):ng-click事件
程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...
随机推荐
- thymeleaf:访问静态方法
<p class="left tel" th:if="${#strings.startsWith(T(net.common.util.tool.common.Req ...
- 10 Go 1.10 Release Notes
Go 1.10 Release Notes Introduction to Go 1.10 Changes to the language Ports Tools Default GOROOT &am ...
- 【转】使用import scope解决maven继承(单)问题
http://blog.csdn.net/mn960mn/article/details/50894022 测试环境 maven 3.3.9 想必大家在做SpringBoot应用的时候,都会有如下代码 ...
- 测试开发之前端——No3.HTML5中的标准属性
HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...
- (一)Dubbo简介
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成.具体可以看 百度百科 https://baike.ba ...
- CAS单点登录流程
CAS的官方站点: https://apereo.github.io/cas/5.2.x/index.html 概念解读: The TGT (Ticket Granting Ticket), stor ...
- .NetCore Cap 注册 Consul 服务发现
注册服务发现 需要使用Cap中的UseDiscovery方法 具体用法如下 var capConsulConfig = Configuration.GetSection("CapConsul ...
- 《高性能MySQL》学习笔记
第1章 MySQL架构与历史 1.2 并发控制 MySQL在两个层面实现并发控制:服务器层与存储引擎层. 读锁和写锁: 在处理并发读或写时,可以通过实现一个由两种锁组成的系统来解决问题. 这两种锁通常 ...
- 【LOJ】#6435. 「PKUSC2018」星际穿越
题解 想出70的大众分之后就弃疗了,正解有点神仙 就是首先有个比较显然的结论,就是要么是一直往左走,要么是走一步右边,然后一直往左走 根据这个可以结合RMQ写个70分的暴力 我们就考虑,最优的话显然是 ...
- 004 作业二(单击弹跳li节点的每个文本节点的值;点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上,有,则去除)
1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...