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. c/c++: c++函数返回类型什么情况带const

    c++ 函数的返回类型,包括const 什么时候起作用呢? 函数返回值不想其立即修改的. 例子如下,这是一个简单的避免产生隐形返回变量的方法,abc 的函数返回是引用,main函数中第10行,++ 操 ...

  2. MySQL-based databases CVE -2016-6663 本地提权

    @date: 2016/11/3 @author: dlive 0x01 漏洞原文 翻译水平不高求轻喷 感觉作者在写文章的时候有些地方描述的也不是特别清楚,不过结合poc可以清晰理解漏洞利用过程 0x ...

  3. error LNK2001: unresolved external symbol "int g_cTemplates" (?g_cTemplates@@3HA)（转）

    原文转自:http://blog.sina.com.cn/s/blog_639a2ad70101kpen.html 编译directshow若干问题的解决 1.安装好windows sdk,进入dir ...

  4. CGRectInset、CGRectOffset、等对比整理

    http://blog.sina.com.cn/s/blog_76f3236b01013zmk.html   分类: iphone有关 1.CGRectInsetCGRect CGRectInset ...

  5. Linux将命令添加到PATH中【转】

    转自:http://www.jb51.net/LINUXjishu/150167.html 电脑中必不可少的就是操作系统.而Linux的发展非常迅速,有赶超微软的趋势.这里介绍Linux的知识,让你学 ...

  6. likely,unlikely宏与GCC内建函数__builtin_expect()

    在 GCC 手册中对 __builtin_expect() 的描述是这样的: 由于大部分程序员在分支预测方面做得很糟糕,所以 GCC 提供了这个内建函数来帮助程序员处理分支预测,优化程序.其第一个参数 ...

  7. C/51单片机

    1.    串口也可以有多根线的,但是各线之间没有协调同步发送,而是各自是独自发送的.并口是同步发送,同步一次8位同时成功同时失败,类比事务. 2.    ASCII码的前32位是通讯预留的编码即使现 ...

  8. AC日记——数颜色 bzoj 2120

    2120 思路: 带修改的莫队: 对于离线排序询问的算法,如何修改呢? 每个询问添加一个修改标记: 表示当前询问在第几个修改之后: 然后把修改标记作为第三关键字来排序: 每次更新端点,先更新时间: 块 ...

  9. UVA 10369 - Arctic NetWork (求最小生成树)

    题意: 在南极有  N  个科研站,要把这些站用卫星和无线电连接起来,是的任意两个之间都能互相通信,如果其中任意的一个地方安装了卫星,那么就可以和其他安装卫星的互相通信,和距离没有关系,但是安装无线电 ...

  10. [Math Review] Statistics Basics: Main Concepts in Hypothesis Testing

    Case Study The case study Physicians' Reactions sought to determine whether physicians spend less ti ...