输入类型文件，必需属性不起作用答案

【问题标题】：Input type file, required attribute not working输入类型文件，必需属性不起作用
【发布时间】：2013-04-04 00:48:24
【问题描述】：

我在我的 C# 项目中使用 MVC 4 框架。我制作了一个页面，在我的数据库（路径）中添加了广告，而实际的文件夹中的图像。

代码有效，但我想建立一个安全机制来防止发布空输入文件（图像选择器）的页面。我发现 HTML 5 支持“必需”属性，但我仍然有还有一些问题。

当我按下提交按钮时（当没有选择图像时）它标记该字段，但后面的代码（UploadController 中的 UploadAd 方法）仍然被触发。这是什么原因造成的？

以下图片和代码可以更容易理解：

查看代码：http://pastebin.com/s9eWn4zW

控制器代码+站点验证：http://oi47.tinypic.com/23leeef.jpg

【问题讨论】：

您能否在您的视图模型上放置一个必需的属性，使其无法通过 ModelState.IsValid 行？这仍然会导致它发布，但是如果您查看 MVC Unobtrusive Validation，这可能会通过验证客户端来阻止它发布。
感谢您、Shyju 和 Ismet 的回答。我发现了一个非常简单的验证stackoverflow.com/questions/5929186/…
请创建一个答案并接受它，以便其他人受益。
哇，好的，我一定会这样做的。

标签： c# html image asp.net-mvc-4 required

【解决方案1】：

您可以将required 属性添加到客户端并在用户单击提交时验证它。另外您必须在服务器端进行验证。保存前检查文件是否存在

foreach(var postedFile in Request.Files)
{
   if (postedFile!= null && postedFile.ContentLength > 0) 
   {
      // good ! Save now
   }
}

【讨论】：

【解决方案2】：

我建议使用一个额外的客户端属性，称为 FileName，它将在您的 Model 类中发生，如下所示：

[Required(AllowEmptyStrings = false, ErrorMessage = "You must add a file.")] 
public string FileName { get; set; }

<div class="editor-label">File</div>
<div class="editor-field">
    <input type="file" //yourCustomAttributes />
    <input type="text" name="FileName" readonly />
    @Html.ValidationMessageFor(model => model.FileName)
</div>

添加 javascript 行也编辑FileName textbox，因为选择要上传的文件。这样，client-side controls 将发生，如果未选择任何文件，则会阻止将表单提交给您的控制器。

【讨论】：

【解决方案3】：

广告创建页面使用以下形式：

@using (Html.BeginForm("UploadAd", "Upload", FormMethod.Post, new { enctype = "multipart/form-data", id = "adForm" }))
{
...
  <div class="editor-label">
            <p>Photo</p>
        </div>
        <div class="editor-field">
            <input type="file" id="files" name="files[]" multiple required/>
        </div>
}

添加以下脚本使其工作：

<script>
    function manualValidate(ev) {
        if (ev.target.checkValidity()) {
            return true;
        } else { return false;}


    }
    $("#adForm").bind("submit", manualValidate);
</script>

【讨论】：

【解决方案4】：

试试这个：

<div class="editor-field">
     <input type="file" name="image" id="uploadfile" required/>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#upload').bind("click",function() 
    { 
        var imgVal = $('#uploadfile').val(); 
        if(imgVal=='') 
        { 
            alert("empty input file"); 
            return false; 
        } 
    }); 
});
</script>

【讨论】：