1、语法

<input name="myFile" type="file">

2、属性（以下三个仅HTML5支持，因此存在兼容性问题）

（1）multiple ：表示用户是否可以选择多个值。multiple只能用于type=file和type=email。

（2）accept：服务器接受的文件类型，否则将被忽略。

音频/ *代表声音文件。仅HTML5支持
视频/ *代表视频文件。仅HTML5支持
图像/ *表示图像文件。仅HTML5支持

（3）required：此属性指定用户在提交表单之前必须填写一个值。

3、获取上传的文件信息

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>file multiple</title>

    </head>

    <body>

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

        <p id='content'></p>

        <script type="text/javascript">

            var test = document.getElementById('test');

            test.addEventListener('change', function() {

                var t_files = this.files;

                var str = '';

                for(var i = 0, len = t_files.length; i < len; i++) {

                    console.log(t_files[i]);

                    str += '<a href="javascript:void(0)">' + t_files[i].name + '</a><br/>';

                };

                document.getElementById('content').innerHTML = str;

            }, false);

        </script>

    </body>

</html>

显示：

更具体使用见MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

type=file文件上传H5新特性的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  3. H5新特性-----type=file文件上传

    1.语法 单文件上传:<input type="file" id="file1"/> 多文件上传:<input type="file ...

  4. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  5. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  6. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  7. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  8. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  9. android webview type=file文件上传，安卓端代码

    http://stackoverflow.com/questions/5907369/file-upload-in-webview http://blog.csdn.net/longlingli/ar ...

随机推荐

  1. 行为型设计模式之备忘录模式(Memento)

    结构 意图 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 适用性 必须保存一个对象在某一个时刻的(部分)状态, 这样以后需要时 ...

  2. [ CodeVS冲杯之路 ] P1010

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1010/ 首先我们将坐标都+1,因为它是从(0,0)开始的 预处理出禁区,也就是马能到达的格子和马自己的格子,标上记号 ...

  3. 过河（DP）

    原题传送门 这道题要用到压缩的思想(原来DP还能这么用...) 其实很简单,假如我们要到某一个位置w 如果我们原位置为Q 很显然,如果(W-Q>=s*t)那么我们一定能到达W 换言之,就是如果我 ...

  4. rabbitmq web管理页面无法访问

    安装rabbitmq 之后可以通过默认的15672端口访问web界面进行管理,rabbitmq一些默认端口如下: 4369: epmd, a peer discovery service used b ...

  5. SQL Server 预编译执行SQLs

    问题描述: MVC5项目,利用执行sql的方式获取数据,但是在利用预编译执行的时候报错了,字段XXXwhich was not supplied. 其实就是这个参数传了个null导致的.在传参数之前做 ...

  6. JDK7集合框架源码阅读（三） HashMap

    基于版本jdk1.7.0_80 java.util.HashMap 代码如下 /* * Copyright (c) 1997, 2010, Oracle and/or its affiliates. ...

  7. 整数划分问题（记忆化搜索和DP方法）

    一. 问题 现在有一正整数N,要把它分为若干正整数之和,问有多少种本质不同的分法? (1)其中最大数不超过m, 有多少种分法? (2)分割后的正整数的数目不超过m个, 有多少种分法? (3)分成最大数 ...

  8. Apache优化建议

    Apache是Web服务器软件,它最常见是搭配PHP开发语言去使用.今天,小编根据Apache官方手册再结合实际,整理出下面这些优化建议,希望对大家的Apache服务器的运行效率有效果. 1.控制Ma ...

  9. bzoj 1067: [SCOI2007]降雨量

    题目链接: bzoj 1067: [SCOI2007]降雨量 题解: 很简单的一道题,但代码里有许多细节需要注意,切容易出错,调了三个小时OTZ 做一个st表维护区间最大值就 在获得年份在序列中的po ...

  10. vue.js 微信浏览器不支持lambda表达式

    最近尝试在用vue重构一个微信网页,然后发现在本地测试是可以的,在微信测试工具里也是正常的,然后在手机里有人正常有人不正常,后来发现规律,微信比较新的是不支持的,微信比较旧的是不支持的.然后网上谷歌了 ...