|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-3-17 19:02 编辑
在H5以前，HTML的文件上传功能略显鸡肋，主要有两点局限：
在H5中这种现状得到了极大的改善，H5允许多个文件上传，并且允许客户端JS访问实际的文件内容。
在H5中优化了input元素，当type=“file”时，有两个属性可以用：
（更多input玩法请看：传送门）
1、accept：该属性控制允许上传的文件类型。
该属性的值为一个或多个MIME类型字符串，多个MIME类型字符串用逗号隔开。
2、multiple：该属性设置是否允许选择多个文件。
从上面介绍我们就可以看出，只要为type为file的input元素增加“multiple”属性，就可以多个文件一起上传。
该属性返回一个FileList对象，FlieList理解为一个数组，用来访问数组内的每个File对象。
File对象是JS的对象，JS可以通过访问该对象获取用户浏览的所有文件的信息。
File对象有3个常用的属性：
1、name：返回File对象对应的文件的文件名，不包括文件路径。
2、type：返回File对象对应的文件的MIME类型字符串
3、size：返回该File对象对应的文件的大小。
当然了，为了更好的演示，我们用一点JavaScript，通过FileLise和File对象访问多个上传文件的信息。
简单的框架：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>文件上传</title>
- </head>
- <body>
- <span>浏览图片：</span>
- <input type="file" id="img" multiple accept="image/*">
- <input type="button" value="显示文件" onclick="showDetail()">
- </body>
- </html>
第一个input元素用来上传文件，类型是image下的所有类型。
第二个input元素是一个按钮，通过showDetail（）事件来显示File对象访问到的内容。
添加代码部分：
- <script>
- var showDetail = function(){
- var imgEle = document.getElementById("img");
- // 获取文件上传内输入的多个文件
- var fileList = imgEle.files;
- // 遍历每个文件
- for(var i = 0 ; i < fileList.length;i++){
- var file = fileList[i];
- var div = document.createElement("div");
- // 依次读取每个文件的文件名、文件类型、文件大小
- div.innerHTML = "第" + (i+1) +"个文件的文件名是："+file.name +"，该文件的类型是："+file.type +"，该文件的大小是："+file.size+"字节";
- // 将div元素添加到页面中
- document.body.appendChild(div);
- }
- }
- </script>
由于设置了multiple可以上传多个文件。
选择文件（可以多个，也可以单个，本次演示上传了3个）会显示：
然后显示文件按钮：
通过File对象可以获取上传文件的文件名、文件类型、文件大小。
如果需要将图片显示出来，那么这些都是需要JS来干的活了～
此处不做介绍，大体就是通过FileReader来读取二进制的文件，然后再将二进制的文件转码为图片。
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-25 15:16:43
置顶卡
千斤顶
显身卡
发表于 2019-7-22 15:39:10
发表于 2020-3-27 11:35:37
