H5优化的文件上传
本帖最后由 不二如是 于 2020-3-17 19:02 编辑在H5以前，HTML的文件上传功能略显鸡肋，主要有两点局限：
**** Hidden Message *****
在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;
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来读取二进制的文件，然后再将二进制的文件转码为图片。
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） {:10_257:} 不错过这个隐藏 学习。 文件上传是什么啊？ woyaoqiaoqiao {:10_277:} bǎndèng
页:
[1]