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++

    当我们考试时遇到大量的读入或者输出时,这些代码会耗费许多运行程序的时间,导致TL 本来 log2n 的算法因为读入被卡成线性的就太不划算了,所以我们这里要采用读入输出优化 getchar 和 putc ...

  2. 培训补坑（day1：最短路&two-sat）

    经过12天的滚粗,终于迎来了暑期培训的结尾啦QAQ 结业考才考了90分,真是对不起孙爷(孙爷请收下我的膝盖) orz小粉兔怒D rank 1 获得小粉兔一只QAQ 由于这次12天的培训题目又比较多,算 ...

  3. 华为上机测试题（大数相乘-java）

    PS:这个不是自己写的,测试OK,供参考. /** * 大数相乘 */ public class BigData { public static void main(String[] args) { ...

  4. 获取Json对象的长度以及判断json对象是否为空

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) = = = = = = = = = = = = = = = =  获取Json对象的长度  = = = = = = = = = = = = = = ...

  5. hdu 5162(水题)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5162 题解:看了半天以为测试用例写错了.这题玩文字游戏.它问的是当前第i名是原数组中的第几个. #i ...

  6. postgres基础知识

    postgres是连接到具体的库:   ./psql -U postgres  不指定库,默认就是用户名的同名库   ./psql -d chat -U postgres  指定chat库   pos ...

  7. POJ 2549：Subsets（哈希表）

    [题目链接] http://poj.org/problem?id=2549 [题目大意] 给出一个数集,从中选择四个元素,使得a+b+c=d,最小化d [题解] 我们对a+b建立Hash_table, ...

  8. Codeforces Round #535 (Div. 3) [codeforces div3 难度测评]

    hhhh感觉我真的太久没有接触过OI了 大约是前天听到JK他们约着一起刷codeforces,假期里觉得有些颓废的我忽然也心血来潮来看看题目 今天看codeforces才知道居然有div3了,感觉应该 ...

  9. 动态规划 001 - 编辑距离(Levenshtein Distance)问题

    问题 字符串的编辑距离也被称为距Levenshtein距离(Levenshtein Distance),属于经典算法,常用方法使用递归,更好的方法是使用动态规划算法,以避免出现重叠子问题的反复计算,减 ...

  10. mysql的load data,高速将文本文件,插入数据库中

    1语法 LOAD DATA [ LOW_PRIORITY | CONCURRENT ] [ LOCAL ] INFILE 'file_name.txt' [ REPLACE | IGNORE ] IN ...