上传文件
原生上传文件可以通过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>