使用 jQuery 对 FILE 类型的 INPUT 进行客户端验证,无需回发

Posted

技术标签:

【中文标题】使用 jQuery 对 FILE 类型的 INPUT 进行客户端验证,无需回发【英文标题】:Client validation of INPUT of type FILE without postback using jQuery 【发布时间】:2011-06-02 09:56:57 【问题描述】:

我想在提交表单之前检查客户端是否选择了文件。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (html.BeginForm("Upload", "Files", FormMethod.Post, new  enctype = "multipart/form-data" ))
         
            <input id="File" name="File" type="file" size="80" />
            <input type="submit" name="name" value="Upload" />    
        

目前此表单正在回发以进行验证。出了什么问题?

【问题讨论】:

【参考方案1】:

@xOn 关于无法修改文件元素是正确的,但您应该能够验证它。

这是一个文件元素,它使用不显眼的验证来确保字段在提交之前具有值和正确的扩展名。

<input type="file" 
    id="myImg" 
    name="logo" 
    data-val="true" 
    data-val-required="Oops, select the logo first!"
    accept="jpg|jpeg"
    data-val-accept="Sorry, we only accept jpegs." />

【讨论】:

【参考方案2】:

“文件”类型的输入是一个安全敏感控件,不能通过 DOM 编写脚本。想象一下点击一个页面,该页面将控件的值设置为敏感文件的知名位置并自动提交表单。上一次此控件可编写脚本大约是 1995 年或 1996 年。对于互联网安全来说,那是一个非常愚蠢的时期。

【讨论】:

是的,但可用性胜出(笑话) 这是错误的。您可以获取&lt;input type="file" /&gt; 的文件名并查看它是否为空白或具有有效的扩展名。您只是无法设置它或获取文件的本地路径。【参考方案3】:
<input type="file" name="path" required>

这在 html5 中适用于我

【讨论】:

以上是关于使用 jQuery 对 FILE 类型的 INPUT 进行客户端验证,无需回发的主要内容,如果未能解决你的问题,请参考以下文章

JQuery File Upload preview File Type 允许所有文件类型

如何在 onload 事件上单击输入(类型=文件)

Jquery对表单表格的操作以及应用

jquery 控制文件上传类型和大小

为什么Jquery对input file控件的onchange事件只生效一次

jQuery ajax,附加数据工作,但数据对另一端(计算机/用户)可见吗?