Question

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

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

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

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

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

Answer 1

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

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

Answer 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将发生，如果没有选择文件，则阻止将表单提交给控制器。

Answer 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>

Answer 4

尝试一下：

Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
        child: FutureBuilder(
            future: getOnSaleProduct(),
            builder: (_, snapshot){
              if (snapshot.connectionState == ConnectionState.waiting) {
                return ListView.builder(
                    itemCount: 4,
                    itemBuilder: (_, index) {
                      return Column(
                      );
                    });
              }else return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemCount: 9,
                  itemBuilder: (_, index) {
                    return InkWell(child: ProductCard(name: "new", price: 123, picture: '', onSale: true));
                  });
            }));
  }

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

4 个答案: