使用 MVC3 Razor 在 Jquery 中应用图像扩展验证

Posted

技术标签:

【中文标题】使用 MVC3 Razor 在 Jquery 中应用图像扩展验证【英文标题】:applying image extension validation in Jquery using MVC3 Razor 【发布时间】:2013-02-17 18:12:03 【问题描述】:

我正在尝试使用 ASp.NET MVC 3 和 Jquery 发布图像。 我在视图中有以下代码

form action="/profile/upload" method="post" enctype="multipart/form-data">

    <label for="photo">Photo:</label>
    <input name="photo" id="photo" type="file">

    <input value="Upload" type="submit">
</form>

在控制器中

public ActionResult Upload(HttpPostedFileBase photo)

    string path = @"D:\Temp\";

    if(photo != null)
        photo.SaveAs(path + photo.FileName);

    return RedirectToAction("Index");

我想要的是我只想通过文件上传上传 jpg 或 png 文件。我想在 JQuery 中进行验证。

请任何人提出一个简单的方法以及如何在提交被触发之前检查验证..

<form action="/profile/upload" method="post" enctype="multipart/form-data">

    <label for="photo">Photo:</label>
    <input name="photo" id="photo" type="file">

    <input value="Upload" type="submit">
</form>

【问题讨论】:

【参考方案1】:

如果您使用支持 html 5 的现代网络浏览器,您可以像这样限制文件类型:

<input name="photo" id="photo" type="file" accept="image/jpg, image/png" />

作为替代方案,您可以使用 jquery.validate 插件在提交表单时检查所选文件的文件扩展名,并相应地显示验证错误。会有2种情况:

    您正在使用内置 ASP.NET MVC 3 的 jquery 不显眼验证。在这种情况下,您必须编写一个自定义适配器,正如我在 this post 中所说明的那样。 您直接使用 jquery.validate 插件并自己编写规则。在这种情况下,定义custom rule 很简单。

【讨论】:

不,那是真的。但它也应该与旧浏览器兼容。另外,我必须显示一些错误消息并将其绑定一些 ,如果验证返回 false 你想使用内置的不显眼的验证还是单独使用 jquery.validate 插件? 哪个容易。我有 Jquery.validate 插件。 我不知道你说的简单是什么意思。对于不同的人,可能会有不同的定义。正如我所说,有两种可能的解决方案,使用哪一种完全取决于您。

以上是关于使用 MVC3 Razor 在 Jquery 中应用图像扩展验证的主要内容,如果未能解决你的问题,请参考以下文章

MVC3.0 中Razor 学习

如何在 VIEW MVC3 Razor 中显示 webforms 页面 .aspx

在 MVC3 中登录 Razor 视图

Javascript、Razor/MVC3 中的 C# if 语句

MVC3 Razor @RenderSection

MVC3 Razor @RenderSection