<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
?<meta name="apple-mobile-web-app-capable" content="yes">
?<meta name="apple-mobile-web-app-status-bar-style" content="black">
?<meta name="format-detection" content="telephone=no">
?<title>多个文件上传</title>
</head>
<body>
?<div style="height: 100px; width: 100px; border: 1px solid red; position: relative;">
??点击上传
??<input onchange="uploadFile()" id="upload" multiple="multiple" type="file" accept="image/*;capture=camera" style="height: 100px;width: 100px;opacity: 0;position: absolute;top: 0;left: 0;" />
?</div>
?<script>
??function uploadFile() {
???var input = document.getElementById(‘upload‘);
?? var files = Array.prototype.slice.call(input.files);
?? files.forEach(function(file, i) {
? var reader = new FileReader();
?? reader.onloadend = function(e) {
?? ??var baseFileStr = this.result.substring((13 + file.type.length),this.result.length);
?? ??console.info("输出文件数据");
?? ??console.info(baseFileStr);
?? }
?? reader.readAsDataURL(file);
?? });
??}
?</script>
</body>
</html>
>>>输出文件数据
>>>iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2...
input标签处理多文件上传
原文地址:https://www.cnblogs.com/Alice-Xu/p/8559216.html