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，即1MB
success: 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\”/>

当然，存放上传图片的临时文件夹是可以随时清理的。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对悠久资源网的支持。如果你想了解更多相关内容请查看下面相关链接

您可能感兴趣的文章: