您可以像获取任何其他字段一样获取文件字段的值。但是，您无法更改它。

因此，要从表面上检查文件是否具有正确的扩展名，您可以执行以下操作：

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

仅此任务不需要插件。从其他几个脚本拼凑而成：

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

这里的技巧是将上传按钮设置为禁用，除非并且直到选择了有效的文件类型。

您可以使用 jQuery 的验证插件：http : //docs.jquery.com/Plugins/Validation

它恰好有一个 accept() 规则，它完全符合您的需要：http : //docs.jquery.com/Plugins/Validation/Methods/accept#extension

请注意，控制文件扩展名并不是万无一失的，因为它与文件的 mimetype 没有任何关系。因此，您可以拥有一个 .png 格式的 word 文档和一个 .doc 格式的完全有效的 png 图像。所以不要忘记在服务器端制作更多控件;)

对于前端，如果您使用的是文件字段，则放置“接受”属性非常方便。

例子：

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

几个重要的注意事项：

• Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 支持接受属性。
• 它将在不同浏览器的文件浏览器对话框中以不同方式显示文件扩展名的文本。

不想检查 MIME 而不是用户撒谎的任何扩展名？如果是这样，那么它少于一行：

<input type="file" id="userfile" accept="image/*|video/*" required />