输入类型文件，所需属性不工作

本文关键字：属性 工作 类型 文件 输入 | 更新日期: 2023-09-27 18:08:46

我在我的c#项目中使用MVC 4框架。我做了一个页面，添加广告在我的DB(路径)和实际文件夹中的图片

代码可以工作，但是我想建立一个安全机制来防止来自张贴空输入文件(图像选择器)的页面。我发现HTML 5支持"required"属性，但我仍然有还有一些问题。

当我按下提交按钮时(当没有选择图像时)它标记字段，但后面的代码(UploadController中的UploadAd方法)仍然被触发。是什么导致了这种情况?

下面的图片和代码可以让你更容易理解:

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

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

输入类型文件，所需属性不工作

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

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

我建议使用一个额外的客户端属性，称为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将发生，并防止表单提交到您的控制器，如果没有选择文件。

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

@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>
相关文章：