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. Cow Dance Show

    题目大意: 经过几个月的排练,奶牛们基本准备好展出她们的年度舞蹈表演.今年她们要表演的是著名的奶牛芭蕾——“cowpelia”. 表演唯一有待决定的是舞台的尺寸.一个大小为K的舞台可以支持K头牛同时在 ...

  2. C++笔试题目大全(笔试宝典)(不断完善中)

    1.new . delete . malloc . free 关系 delete 会调用对象的析构函数 , 和 new 对应 free 只会释放内存, new 调用构造函数. malloc 与 fre ...

  3. hdu 5480(维护前缀和+思路题)

    Conturbatio Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  4. hdu 2489(状态压缩+最小生成树)

    Minimal Ratio Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. web前端性能优化，提升静态文件的加载速度

    原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...

  6. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  7. 搭建负载均衡的环境（利用虚拟机上的四台centos）

    以下转载: 准备 l 系统:Centos6  (三台) l 负载均衡:LVS  + keepalived l 服务器1:Http l 服务器2:Http ip配置 1.VIP(virtual ip): ...

  8. [POJ 2373][BZOJ 1986] Dividing the Path

    Link: POJ 2373 传送门 Solution: 一开始想错方向的一道简单$dp$,不应该啊…… 我一开始的想法是以$cows' ranges$的节点为状态来$dp$ 但明显一个灌溉的区间的两 ...

  9. noip数论复习总结

    (上不了p站我要死了,侵权度娘背锅) 勉勉强强算是把数论复习的差不多了. 总结一下吧. 其实数论的知识大部分是结合在一起的,勉强分类总结 组合数 求法 组合数的求法根据不同情况选用不同的方法 2.3都 ...

  10. 2.3多线程（java学习笔记）synchronized关键字

    一.为什么要用synchronized关键字 首先多线程中多个线程运行面临共享数据同步的问题. 多线程正常使用共享数据时需要经过以下步骤: 1.线程A从共享数据区中复制出数据副本,然后处理. 2.线程 ...