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. kvm qemu内幕介绍

    转自:http://blog.csdn.net/wj_j2ee/article/details/7978259目录 1 硬件虚拟化技术背景 2 KVM的内部实现概述 2.1 KVM的抽象对象 2.2 ...

  2. 虚拟机linux 挂载windows共享目录 给linux的nginx服务器使用

    mount -t cifs -o username=administrator,password=xxxx,file_mode=0777,dir_mode=0777 //192.168.xx.xxx/ ...

  3. 在 Flask 项目中解决 CSRF 攻击

    #转载请留言联系 1. CSRF是什么? CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求.包括:以你名义 ...

  4. RobotFramework自动化4-批量操作案例【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/robotframework/ 前言 有时候一个页面上有多个对象需要操作,如果一个个去定 ...

  5. ubuntu16下安装telnet和opensshserver

    安装了虚拟机,使用的是ubuntu 16,server版本. 启动后发现没有telnet和ssh,就安装了(netstat -a|grep telnet). apt-get install openb ...

  6. create-react-app创建项目后运行npm run eject命令报错解决办法

    最近在用create-react-app创建项目,因要配置各种组件,比如babel,antd等, 需要运行npm run eject命令把项目的配置文件暴露出来,但是还是一如既然碰到报错,因为是在本地 ...

  7. [thinkphp] APP_DEBUG开启之后session不稳定

    有时候在一个方法中写入了session, 在另一个方法中打印却什么都没有. 我这次的情况是网页上通过ajax传值到一个php函数,然后php把值写入session中.然后我在另一个php方法中打印se ...

  8. ESXI和vSphere的安装配置-实现一台电脑硬件虚拟化为两台

    本篇文章包含以下几个部分: 1EXSI软件和vSphere软件的安装 2在vSphere上安装虚拟系统 3对虚拟系统通过配置实现硬件虚拟化,实现硬件直通 1.EXSI安装 通过网上下载EXSI ISO ...

  9. spring jpa data笔记

    tomcat启动Maven项目的时候总抛出这样的错误: Error creating bean with name 'org.springframework.boot.autoconfigure.or ...

  10. 【OpenJudge7624】【区间DP】山区建小学

    山区建小学 总时间限制: 1000ms 内存限制: 65536kB [描述] 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两 ...