是否可以验证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的大小和类型 的相关文章

  • 使用数据库数据模型生成 SQLAlchemy 模型、架构和 JSON 响应

    将 Flask 和 SQLAlchemy 用于 Python Web 应用程序 我的目标是创建一个系统 在其中我可以 从现有 PostgreSQL 数据库导入数据模型 并将它们映射到相应 SQLAlchemy 模型中的字段 使用这些 SQL
  • 如何偏移网格项目,同时移动其兄弟项目? [复制]

    这个问题在这里已经有答案了 我正在使用 CSS 网格 我想偏移一个元素 以便它在网格列上水平移动 我还希望这个元素保留其当前宽度 并应用偏移值此外到元素的宽度 Example container display grid grid temp
  • 在 mdn web 文档中 Element.querySelector 方法说它应该是后代,但示例显示不然

    我正在从 MDN 网络文档学习 JavaScript 我刚刚在学习Element querySelector method 据记载 它返回第一个元素 该元素是调用它的元素的后代 并且与指定的选择器组匹配 但有一个例子与这个事实相矛盾 var
  • window.print() 仅打印屏幕的“可视”部分

    我有一个可滚动屏幕 上面有一个打印按钮 并且在其 onclick 事件上调用 window print 函数 我的问题是它只打印屏幕的 可见 部分 而不是整个屏幕 如果页面可滚动 则当内容无法容纳在 1 页中时 打印应扩展到 2 或更多 页
  • 使用 Android 浏览器的 HTML5 离线存储

    我正在研究如何使用 Android 设备来创建需要离线使用的网站 我还没有找到很多关于Android浏览器如何处理HTML5的localStorage和WebSQL的信息 有人知道这些的尺寸限制吗 它们是否可以更改 我知道移动 Safari
  • 无法写入文本文件

    我正在运行一些测试并需要写入文件 当我运行测试时open file r 不写入文件 测试脚本如下 class GetDetailsIP TestGet def runTest self self category PTZ try This
  • 元视口标签似乎被完全忽略或没有效果

    我把这个标签放在了头部一个网页 http www belovedobjects de 由于某种原因 它在我的 iPhone 上似乎被忽略了 甚至添加了user scalable no没有影响 我尝试了许多宽度 初始比例等值 似乎没有任何效果
  • JS jQuery - 检查值是否在数组中

    我更喜欢 PHP 而不是 JS 我认为我的问题更多是语法问题 我有一个小的 jQuery 来 验证 并检查输入值 它适用于单个单词 但我需要数组 我正在使用inArray jQuery 的 var ar value1 value2 valu
  • 从 iOS/Android 上的网络应用程序调用本机日期选择器

    我正在尝试探索使用 HTML5 在不同平台上运行本机 Web 应用程序的可能性 目前 一个
  • 如何在 MVC 3 Razor 中显示解码后的编码 HTML?

    我在 MVC 3 和 Asp net C 中使用 Razor 我有一个带有以下代码的视图 model ContentBody有一些 HTML 标签 我需要将此 HTML 内容显示为DECODED 我该如何更改视图中的代码 div class
  • 如何从 iframe 获取 href 链接

    my html content is in iframe content from test html test html 在我的服务器中 有一个链接 例如 div a href www google com a div jquery do
  • IE10重画/重画问题

    你可以在这里看到这个工作 中断 http new campchampions com parents http new campchampions com parents 该问题仅在 IE10 中出现 用户滚动一小段距离后 导航就会被固定
  • 将 HTML 表格转换为 R 数据框

    table cellspacing 1 cellpadding 7 border 1 thead tr td align left valign middle nbsp td td align left 1a My peers make a
  • 从 html 链接在移动设备上打开应用程序

    我有一个包含我的社交媒体帐户的 html 页面 我希望当我单击这些链接时可以转到我在这些社交媒体应用程序上的个人资料 例如 Skype a href My Skype a 当我在移动设备上点击此链接时 它会打开 Skype 并转到我的帐户
  • Javascript:使用箭头键导航表格输入

    我正在为客户制作 HTML 成绩册 我使用 PHP 生成成绩册 然后输出一个 HTML 表 如下例所示 每个 td 包含一个带有 td
  • 是否可以防止出现文件对话框?为什么?

    假设我有输入 类型 文件 元素 我想拦截 onclick 事件并防止在不满足条件时出现文件对话框 是否可以 如果不是的话 为什么 Soufiane 的代码要求您的页面上有一个名为 jQuery 的 Javascript 库 如果您没有 您可
  • Doctype的实际使用

    虽然我在 w3 org 上浏览了大量有关 Doctype 的信息并了解不同类型的 doctype 过渡型 严格型 框架集 我还是不太清楚在页面上使用Doctype的实际用途是什么 I mean 是为了阻止开发商 在代码中使用某些标签 例如
  • 如何获取表单的onSubmit事件?

    我想知道如何抢onsubmit表单中的事件来进行一些表单验证 因为我无权直接访问它 我正在编写一个用于评论的 WordPress 插件 因此无法直接访问表单标签或提交按钮 我在尝试为我的插件执行此操作时感到非常沮丧 因此我在下面编写了一个
  • grunt:如何生成 HTML 形式的 jshint 输出

    我正在尝试使用 grunt 运行 jshint 这可行 但现在我希望输出为 HTML 这是我的 grunt 文件 module exports function grunt Project configuration grunt initC
  • 将聊天文本中的成对符号替换为 html 标签,以设置粗体、斜体和删除线样式

    我正在尝试制作 Whatsapp 风格的文本帖子 当用户创建这样的文本时 Hi how are you where are you 然后这个文本会像这样自动改变 Hi你好吗你在哪 我知道我可以使用 php 正则表达式来做到这一点 如下所示

随机推荐

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

    这是后续如何获取可变参数模板类中函数指针的参数类型 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 属性 我试过这个