邯郸市出租车,上海电机学院跳楼,孙悟空jr
这一节我们来讲讲在mvc中如何进行文件的上传，我们逐步深入，一起来看看。
upload file（一）
我们在默认创建的项目中的home控制器下添加如下：
我要评论
public actionresult uploadfile()
{
return view();
}
[httppost]
public actionresult uploadfile(httppostedfilebase file)
{
var filename = file.filename;
var filepath = server.mappath(string.format("~/{0}", "file"));
file.saveas(path.combine(filepath, filename));
return view();
}
在 uploadfile 视图中添加上如下：
<form action="/home/uploadfile" method="post" enctype="multipart/form-data"> <input type="file" name="file" /><br /> <input type="submit" value="提交" /> </form>
有关视图中我们就不必多说，只需明白如下两点：
（1）在后台利用httppostedfilebase来接收上传文件，该类为一个抽象类，但在asp.net web form却没有此类，此类的出现是为了更好的进行单元测试。
（2）在视图中文件类型的name要和后台接收文件的参数一致。
接下来我们进行演示看看结果：
上述我们简单的上传了一个excel文件，下面我们通过强类型视图以及模型验证来强化上传。
upload file（二）
我们创建如下blogmodel类：
public class blogmodel
{
[display(name = "博客名称")]
[required(errormessage = "请输入你的博客名称！")]
public string blogname { get; set; }
[display(name = "博客地址")]
[required(errormessage = "请输入你的博客地址！")]
public string blogaddress { get; set; }
[display(name = "博客图片")]
[required(errormessage = "请上传你的博客图片！")]
[validatefile]
public httppostedfilebase blogphoto { get; set; }
}
上述未有验证文件的特性，只能自定义文件特性，如下：
public class validatefileattribute : validationattribute
{
public override bool isvalid(object value)
{
int maxcontentlength = 1024 * 1024 * 4;
string[] allowedfileextensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };
var file = value as httppostedfilebase;
if (file == null)
return false;
else if (!allowedfileextensions.contains(file.filename.substring(file.filename.lastindexof('.'))))
{
errormessage = "请上传你的博客图片类型: " + string.join(", ", allowedfileextensions);
return false;
}
else if (file.contentlength > maxcontentlength)
{
errormessage = "上传图片过大，不能超过4兆 : " + (maxcontentlength / 1024).tostring() + "mb";
return false;
}
else
return true;
}
}
我们可以任意设置上传的文件大小，我们设置为40兆，在配置文件中我们知道 maxrequestlength = 4096 默认是4兆，当然我们可以改变其默认设置。
<httpruntime targetframework="4.5" executiontimeout="1100" maxrequestlength="40960" />
此时我们接着在控制器中修改上述上传的方法：
[httppost]
public actionresult uploadfile(blogmodel bmodel)
{
if (modelstate.isvalid)
{
var filename = bmodel.blogphoto.filename;
var filepath = server.mappath(string.format("~/{0}", "file"));
bmodel.blogphoto.saveas(path.combine(filepath, filename));
modelstate.clear();
}
return view();
}
我们接下来看看效果：
咋回事，出状况了看来是我们的文件过大的原因，看了下该文件有接近45兆，而我们却设置的是40兆，于是乎继续在配置文件中去修改文件大小，但是结果还是一样。我们继续仔细看看该结果的提示，根据提示去找到配置文件下的节点再试试，我们在 syste.webserver 节点下设置为2g：
<security> <requestfiltering> <requestlimits maxallowedcontentlength="2147483647"> </requestlimits> </requestfiltering> </security>
结果就好使了，查了查也有遇到类似问题的人，貌似只有给个结果，却没有给解释，为什么在 httpruntime 中设置不行，但是有些这样设置是正确的，这是什么原因？最终找到了答案：
（1）在iis 5和iis 6中，默认文件上传的最大为4兆，当上传的文件大小超过4兆时，则会得到错误信息，但是我们通过如下来设置文件大小。
<system.web> <httpruntime maxrequestlength="2147483647" executiontimeout="100000" /> </system.web>
（2）在iis 7中，默认文件上传的最大为28.6兆，当超过其默认设置大小，同样会得到错误信息，但是我们却可以通过如下来设置文件上传大小。
<system.webserver> <security> <requestfiltering> <requestlimits maxallowedcontentlength="2147483647" /> </requestfiltering> </security> </system.webserver>
【类推的话，个人觉得可能是在iis 7+以上都是通过如上述iis 7来设置文件上传大小】
虽然我们在服务器端对其进行验证，但是我们觉得这样还是不能保险，我们继续在客户端对其上传的图片类型和大小进行验证。
（1）利用强类型视图给出视图代码：
<style type="text/css">
.field-validation-error {
color: red;
}
</style>
<form id="uploadfilesub" action="/home/uploadfile" method="post" enctype="multipart/form-data">
<fieldset>
<legend></legend>
<ul class="lifile">
<li>
@html.labelfor(m => m.blogname)<br />
@html.textboxfor(m => m.blogname, new { maxlength = 50 })
@html.validationmessagefor(m => m.blogname)
</li>
<li>
@html.labelfor(m => m.blogaddress)<br />
@html.textboxfor(m => m.blogaddress, new { maxlength = 200 })
@html.validationmessagefor(m => m.blogaddress)<br />
</li>
<li>
@html.labelfor(m => m.blogphoto)
@html.textboxfor(m => m.blogphoto, new { type = "file" })
@html.validationmessagefor(m => m.blogphoto)
<span id="warning" style="color:red;font-size:large;"></span>
</li>
<li>
<input type="submit" value="提交" />
</li>
</ul>
</fieldset>
</form>
（2）利用脚本获取上传文件大小：
function getfilesize(fileid) {
var filesize = 0;
filesize = $("#" + fileid)[0].files[0].size;
filesize = filesize / 1048576;
return filesize;
}
（3）根据上传的路径获取文件名称：
function getnamefrompath(strfilepath) {
var objre = new regexp(/([^\/\\]+)$/);
var strname = objre.exec(strfilepath);
if (strname == null) {
return null;
}
else {
return strname[0];
}
}
（4）当更换文件时触发change事件对其文件类型和文件大小进行验证：
$("#blogphoto").change(function () {
var file = getnamefrompath($(this).val());
if (file != null) {
var errors = $(document).find(".field-validation-error");
$.each(errors, function (k, v) {
if ($(v).attr("data-valmsg-for") === "blogphoto") {
$(v).hide();
}
});
var extension = file.substr((file.lastindexof('.') + 1));
switch (extension) {
case 'jpg':
case 'png':
case 'gif':
case 'pdf':
filetypebool = false;
break;
default:
filetypebool = true;
}
}
if (filetypebool) {
$("#warning").html("只能上传扩展名为jpg,png,gif,pdf的文件！");
return false;
}
else {
var size = getfilesize('blogphoto');
if (size > 4) {
filesizebool = true;
$("#warning").html("上传文件已经超过4兆！");
} else {
filesizebool = false;
}
}
});
（5）当点击提交按钮时对其进行文件进行验证：
$("#uploadfilesub").submit(function () {
$("input[type='text']").each(function (k, v) {
if ($(v).length) {
$(v).siblings("span").hide();
}
});
if (filetypebool || filesizebool) {
return false;
}
});
【注意】上述对于验证不是太完整，但是基本的架子已经给出。
接下来我们来完整的演示整个过程。
上述我们一直是利用的纯html代码，当然也可以利用mvc的扩展方法来进行，如下（最终渲染的还是表单，本质上是一致的，就不做过多探讨了）
@using (html.beginform("uploadfile", "home", formmethod.post, new { enctype = "multipart/form-data" }))
{
<input type="file" id="file" name="file" />
<input type="submit" value="提交" />
}
结语
这一节我们比较详细的讲述了在mvc中如何进行文件的上传，但是我们还有一点未曾讲到，则是利用流来将如我们上述的图片转换成字节来插入到数据库中。
有关上传可以参考.net对此利用流来上传。
作者和原文连接：recluse_xpy http://www.cnblogs.com/createmyself/p/5414200.html
以上就是本文的全部内容，希望对大家的学习有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
asp.net搭建博客，使用BlogEngine.NET+MySql搭建博客
网友评论