表单元素实现上传文件的方法表单元素实现上传文件的方法表单元素实现上传文件的方法表单元素实现上传文件的方法表单元素

<body>
<input type="file" name="" id="fileId" onchange="changeFn()"> 
<script>
function changeFn() 
{ /* 获取文件域元素 */ let fileDOM = document.getElementById('fileId'); 
/* 打印出 文件域中具体传入的文件 */
console.log(fileDOM.files[0]) 
/*  实例化一个表单对象*/

let formdata = new FormData(); 

/* 使用append方法，添加一个name叫file的文件 */ 
/* name具体叫什么，是由后端的接口文档提供的 */ 
formdata.append('file', fileDOM.files[0]); 
/* 创建一个xhr对象 */ 
let xhr = new XMLHttpRequest();

/* 参照接口文档使用post请求，采用异步的方式 */

xhr.open('post', 'https://。。。', false) 
/* 设置请求头，名字叫Authorization，值是token值 */
xhr.setRequestHeader('Authorization', 'Bearer。。。') 
/* 使用onreadystatechange去监听数据的返回，如果状态为4，表示请求已完成 已完成就打印相关的数据 */
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { 
/* console.log(JSON.parse(xhr.responseText)); */ 
let { meta } = JSON.parse(xhr.responseText);
/* 状态码为200 表示请求成功 */ 
if (meta.status == 200) { alert(meta.msg) } } }
/* 把添加完文件的表单对象传给服务端 */ xhr.send(formdata) } </script> </body>

表单元素 实现上传文件的方法

表单元素实现上传文件的方法