文章摘要
这篇文章介绍了如何使用 ASP.NET MVC 应用程序来处理文件上传功能。文章包含以下主要内容：
1. **HTML 与 CSS**：定义了表单元素和图片加载逻辑，使用 `@using` 标签加载 HTML 表单，并设置了图片加载动画。
2. **JavaScript 功能**：
- **文件格式与大小验证**：使用 `checkFileTypeAndSize` 函数验证上传文件的格式（JPEG、JPG、GIF、PNG）和大小（最大1024KB）。
- **数据提交**：通过 `@Html.HiddenFor` 隐藏文件选择框，使用 AJAX 提交文件数据，并根据 uploads 的响应显示图片。
- **错误处理**：包括格式错误和大小错误的处理，显示提示信息。
- **图片删除**：定义了删除图片的功能，通过 AJAX 调用删除指定图片。
3. **图片展示**：使用 HTML 表单和 JavaScript 创建表格，显示上传成功的图片，包含图片路径和名称。
文章重点描述了文件上传的完整流程，从文件选择到上传、错误处理，再到成功展示图片。
@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=”https://www.jb51.net/article/~/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=”https://www.jb51.net/article/~/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>
}