是否可以验证html5中input=file的大小和类型

2024-04-02

我正在读这个http://dev.w3.org/html5/markup/input.file.html http://dev.w3.org/html5/markup/input.file.html,但我只找到了“accept”属性。

我试过这个

<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />

是否可以在客户端验证文件大小?

我发现这个技术适用于 IE

<html>
<head>
<script>
function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

是否可以使用同样的方法html5 文件系统 API http://www.html5rocks.com/en/tutorials/file/filesystem/ ?

UPDATE

我可以这样做(demo http://jsfiddle.net/9bhcB/):

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
    <form >
        <input type=file id=f max-size=32154 >
        <input type=submit>
    </form>
<script>
$(function(){
    $('form').submit(function(){
        var isOk = true;
        $('input[type=file][max-size]').each(function(){
            if(typeof this.files[0] !== 'undefined'){
                var maxSize = parseInt($(this).attr('max-size'),10),
                size = this.files[0].fileSize;
                isOk = maxSize > size;
                return isOk;
            }
        });
        return isOk;
    });
});
</script>
</body>

它工作正常,但我认为原生 html5 attr 来验证会更好


    <form  class="upload-form">
        <input class="upload-file" data-max-size="2048" type="file" >
        <input type=submit>
    </form>
    <script>
$(function(){
    var fileInput = $('.upload-file');
    var maxSize = fileInput.data('max-size');
    $('.upload-form').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize){
                alert('file size is more then' + maxSize + ' bytes');
                return false;
            }else{
                alert('file size is correct- '+fileSize+' bytes');
            }
        }else{
            alert('choose file, please');
            return false;
        }

    });
});
    </script>

http://jsfiddle.net/9bhcB/2/ http://jsfiddle.net/9bhcB/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以验证html5中input=file的大小和类型 的相关文章

  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • MVC 模式中的验证层

    验证模型将使用的数据的最佳位置在哪里 例如 考虑登记表 我们有一些来自注册表的数据 那么验证这些数据的最佳位置在哪里 我们应该通过 if 语句或特殊的验证器类来检查每个数据 这意味着大量的编码 所以我想了解在哪里可以做到这一点 在控制器中
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c
  • 以编程方式更改 html 选择下拉列表后 onchange 不会触发

    我在 HTML 中有一个选择
  • Chrome:当父级固定时,无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • teracopy 如何替换默认的 Windows 副本

    我问了这个问题Windows 文件复制内部结构 动态加密 https stackoverflow com questions 24220382 windows file copy internals on the fly encryptio
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 使用非常量表达式作为模板参数

    这是后续如何获取可变参数模板类中函数指针的参数类型 https stackoverflow com questions 9065081 how do i get the argument types of a function pointe
  • 生成器完成后调用自耕农生成器

    我希望在第一个生成器完成安装后调用另一个 yeoman 生成器 这将基于我对其中一个提示给出的答案 我尝试在最后调用它 end function this installDependencies callback function if t
  • JAXB - 将 SOAP 映射到 Java 类

    我需要帮助将我的 Soap Envelope 映射到 java 类 我的目的是将结果操纵到数据库 我在获取 SOAP 信封或使用 DB 方面没有任何问题 我的问题完全在于 JABX 以及根据我的 SOAP 信封映射我的类 这是我的肥皂
  • 登录时传递cookie

    我想集成 python Selenium 和 Requests 模块以在网站上进行身份验证 我正在使用以下代码 import requests from selenium import webdriver driver webdriver
  • 如何在 SQLite 查询中使用正则表达式?

    我想在 sqlite 中使用正则表达式 但我不知道如何 我的表有一列包含如下字符串 3 12 13 14 19 28 32 现在 如果我输入 where x LIKE 3 我还会得到包含 13 或 32 等值的行 但我只想获取该字符串中恰好
  • 以编程方式在 UITableViewCell 中呈现带有按钮的视图控制器 (Swift)

    I am trying to make it where when a user clicks on a table view cell in my table view it takes them to a new view contro
  • Outlook 插件 - 获取当前选定的日历日期

    当右键单击日历并运行功能区操作时 是否可以像获取当前邮件项或约会项一样获取选定的日历日期 功能区 XML
  • 是否可以将组件作为 props 传递并在 Vue 的子组件中使用它?

    在 Vue 2 0 应用程序中 假设我们有组件 A B 和 C A声明 注册并使用B 是否可以将C从A传递到B 像这样的事情
  • 如何取消numpy seed()的效果?

    我想在程序的第一部分使用 np random seed 并在第二部分取消它 再次 在我的 python 文件的第一部分中 我希望在每次执行时生成相同的随机数 在第二部分中 我希望在每次执行时生成不同的随机数 在第一部分中 使用常量初始化种子
  • Exchange Web 服务附件加载缓慢

    我正在编写一些代码来下载和处理电子邮件的附件 然后处理它们 该代码在某些情况下可以按要求工作 但仍然存在一些重大问题 每当代码将附件加载到本地磁盘上的文件中时 都会花费很长的时间 并且经常会由于下载缓慢而超时 并出现以下异常 A first
  • 意外查询成功

    SELECT COUNT FROM rps2 workflow WHERE workflow added gt TO DATE 01 09 2011 dd mm yyyy AND workflow finished lt TO DATE w
  • 如何将 system.data.SQLite.dll 的引用添加到 Windows Phone 7

    我是 Windows Phone 7 的新手 请帮我解决这个问题 我想在Windows Phone 7中添加SQLite数据库 我下载了system data SQLite dll 来自sourceforge www sqlite org
  • 蓝鸟承诺解析(数据)在客户端代码中未定义

    希亚斯 我有一个简单的应用程序 客户端期望得到一个承诺作为结果 但是在调用resolve 方法时 承诺不断返回未定义的结果 客户端代码 UsersRepo findOneAsync id id then function err resul
  • 为函数想出好的名字时遇到困难

    因此 我经常难以用简洁的名称描述函数 对于重用的功能来说 这通常不是问题 但通常需要将大型流程分解为子功能 这些通常会得到奇怪的名字 例如connectionsToAccessLines or handleWallVisionSplit或类
  • 在 C 预处理器中,“#”字符是否必须位于行的开头? [复制]

    这个问题在这里已经有答案了 我已经用 C 语言编程有一段时间了 在此期间 我了解到将预处理器指令之前的 字符放在第一列是一种常见的约定 Example include
  • 如何在 Foursquare Venues 搜索 API 中使用 CategoryId

    当包含categoryId参数时 我从API查询中得到了意外的结果 例如 当使用以下参数搜索马萨诸塞州波士顿的 The Citizen Public House 时 ll 42 3489027315987 71 096134185791 q
  • random.expovariate 相当于泊松过程

    我在某处读到 python 库函数 random expovariate 产生相当于泊松过程事件的间隔 真的是这样吗 或者我应该对结果施加一些其他功能 严格阅读你的问题 是的 这就是 random expovariate 所做的 expov
  • 什么是热点?

    我刚刚听说过 HotSpot JVM 而不是 Oracle JRockik JVM 什么是热点 这是旧的 Sun JVM 还是其他什么 HotSpot 是附带的 Sun JVM 它支持频繁使用的代码部分的即时编译 出于所有实际目的 它是 S
  • 如何从消息机器人中删除“Powered by ManyChat”页脚

    我正在为消息平台开发一个聊天机器人 但我发现自己对用户文本输入字段的页脚上出现的 ManyChat 感到着迷 我已成为该页面的管理员 并继续从该页面的已连接应用程序列表中删除许多聊天 但页脚仍然存在 也许我必须调用 Messenger 平台
  • 是否可以验证html5中input=file的大小和类型

    我正在读这个http dev w3 org html5 markup input file html http dev w3 org html5 markup input file html 但我只找到了 accept 属性 我试过这个