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

时间:2013-03-03 17:15:04

标签: jquery asp.net-mvc-3 validation

我正在尝试使用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 个答案:

答案 0 :(得分:0)

如果您使用的是支持HTML 5的现代网络浏览器,则可以限制文件类型,如下所示:

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

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

  1. 您正在使用内置ASP.NET MVC 3的jquery unobtrusive验证。在这种情况下,您必须编写自定义适配器,如我在this post中所示。
  2. 您正在直接使用jquery.validate插件并自行编写规则。在这种情况下,定义custom rule
  3. 就是一件简单的事情