小记 HTML5 file对象

小记 HTML5 file对象

<input type="file" id="myfile" multiple>

这是个很普通的 file 上传组件,multiple 是支持多选,当然 IE6-9 是不支持的,所以先不论他们了。

file对象 是一个非常好用的东西,可以获取到文件的 文件名,文件大小,文件类型,最后一次修改日期。
用起来也很简单,来看个小例子:

<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>file</title>
</head>
<body>
  <input type="file" id="myfile" multiple>
  <script>
    var myfile = document.getElementById("myfile");
    myfile.onchange = function () {
      console.log(myfile.files);
    }
  </script>
</body>
</html>

不出意外的话,你可以在控制台看到如下内容:
小记 HTML5 file对象

好了,今天就分享这个小知识点。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109760.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 失去焦点和获得焦点发生事件(js)「建议收藏」

    失去焦点和获得焦点发生事件(js)「建议收藏」失去焦点:onblur=”hanshu(this)”获得焦点:onfocus=”hanshu(this)”{     alert(‘请确认您输入格式是否正确!’);   }//函数名:chksafe//功能介绍:检查是否含有,//,///参数说明:要检查的字符串//返回值:0:是 1:不是functionchksafe(a)

    2022年6月30日
    25
  • MFS学习总结

    MFS学习总结公司使用moosefs做图片存储,最近学习了一下,在此小小总结一下,主要分以下几部分:MFS概述、特性和新版改进MFS工作原理和设计架构MFS的安装、部署、配置MFS的高级特性MFS的性能测试MFS

    2022年8月6日
    6
  • UDP协议详解[通俗易懂]

    UDP协议详解[通俗易懂]目录1、简介2、UDP协议3、端口4、UDP和ARP之间的交互5、UDP适用场景6、UDP洪水1、简介UDP(UserDatagramProtocol)是一个简单的面向消息的传输层协议,尽管UDP提供标头和有效负载的完整性验证(通过校验和),但它不保证向上层协议提供消息传递,并且UDP层在发送后不会保留UDP消息的状态。因此,UDP有时被称为不可靠的数据报协议。如果需要传输可靠性,则必须在用户应用程序中实现。UDP使用具有最小协议机制的简单无连接通信模型。UDP提供数据

    2022年6月7日
    52
  • angular路由懒加载强制刷新_angular路由

    angular路由懒加载强制刷新_angular路由version7.x{path:’test’,loadChildren:’./test/test_ui.module#TestUIModules’},version8.x{path:’test’,loadChildren:()=>import(‘./test_ui/test_ui.module’).then(mod=>mod.TestUIModules)},

    2022年10月7日
    3
  • idea中如何配置maven项目_idea配置maven环境

    idea中如何配置maven项目_idea配置maven环境一、使用步骤1.在Idea中配置maven(1)、打开Idea,点击File,然后点击Settings,进入设置,或者直接按Ctrl+Alt+S进入设置在这里插入图片描述(2)、先在左上角的搜索框输入maven,找到maven后单击,然后在右边的mavenhomepath的右边选择你的maven安装路径,选择到根目录就好了,然后点击确定,具体步骤看下图:在这里插入图片描述(3)、Localrepository是maven的本地仓库,默认路径是C:UsersAdministrator.

    2022年10月3日
    3
  • php header函数导出excel表格

    php header函数导出excel表格

    2021年10月26日
    62

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号