input标签实现一次上传多个文件并对数据储存以及传输
【摘要】 上传文件原生上传文件可以通过input标签中的type="file"实现，多文件上传则需要加上multiple属性。//html <span>文件名：</span> <input type="text" id="doc"> <button>选择文件</button> <input type="file" id="upload" multiple onchange="getFile(v...
上传文件
原生上传文件可以通过input标签中的type="file"实现，多文件上传则需要加上multiple属性。
//html
<span>文件名：</span>
<input type="text" id="doc">
<button>选择文件</button>
<input type="file" id="upload" multiple onchange="getFile(value)" style="opacity: 0.5; margin-left: -74px; width: 74px;">
获取上传文件信息
通过onchange方法触发文件上传。怎么才能拿到上传的文件信息呢？
通过获取id为upload的dom，即document.getElementById('upload')，通过document.getElementById(‘upload’).files获取文件的具体信息，该数据为伪数组。
<script>
function getFile(value) {
// 获取文本框dom
var doc = document.getElementById('doc');
// 获取上传控件dom
var upload = document.getElementById('upload');
let files = upload.files;
// 获取文件名
var fileName = upload.files[0].name;
// 获取文件路径
var filePath = upload.value;
doc.value = fileName;
}
</script>
数据传输
将文件信息放到formData中，然后进行传输。
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i]
formData.append('files', file)
}
注意直接console.log(formData)是空值，可以使用formData.getAll("")或者formData.get("")查看存储的文件信息，getAll查看全部信息，get默认查看第一个。
console.log(formData.getAll('files'))
源码
<body>
<span>文件名：</span>
<input type="text" id="doc">
<button>选择文件</button>
<input type="file" id="upload" multiple onchange="getFile(value)"
style="opacity: 0.5; margin-left: -74px; width: 74px;">
<script>
function getFile(value) {
let formData = new FormData();
// 获取文本框dom
var doc = document.getElementById('doc');
// 获取上传控件dom
var upload = document.getElementById('upload');
let files = upload.files;
//遍历文件信息append到formData存储
for (let i = 0; i < files.length; i++) {
let file = files[i]
formData.append('files', file)
}
// 获取文件名
var fileName = upload.files[0].name;
// 获取文件路径
var filePath = upload.value;
doc.value = fileName;
}
</script>
</body>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）