JS获取本地文件并进行网络传输的代码详解

<input type="file">
<script>
    const files = document.querySelector('input');
    files.addEventListener('change',(e)=>{
        console.log(e.target.files);
    })
</script>

function validateFile(file){
    const maxSize = 1 * 1024 * 1024;
    const types = ['.jpg','.jpeg','.png','.bmp','.webp','.gif'];
    const fileName = file.name.toLowerCase();
    if(file.size > maxSize){
        alert('文件过大！');
        return false;
    }
    if(!types.some((item)=>fileName.endsWith(item))){
        alert('文件类型不匹配！');
        return false;
    }
    return true;
}
files.addEventListener('change',(e)=>{
    if(!validateFile(e.target.files[0])){
        e.target.value = '';
        return;
    }
    // 后续操作...
})

const files = document.querySelector('input');
const img = document.querySelector('img');
files.addEventListener('change',(e)=>{
    let file = e.target.files[0];
    // 验证文件基本信息
    if(!validateFile(file)){
        e.target.value = '';
        return;
    }
    let reader = new FileReader();
    reader.readAsDataURL(file); // 读出文件信息并转化为URL
    reader.addEventListener('load',(e)=>{
        console.log('文件加载完成');
        img.src = e.target.result; // 将URL赋予img元素,此时e.target为reader
    })

})

POST /upload HTTP/1.1
Host:127.0.0.1:5000
Content-Type: multipart/form-data;boundary=xxx

---xxx
Content-Disposition:form-data; name="xxhh";filename="bg.jpg"
Content-Type:image/jpeg

文件数据...
--xxx--

const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:5000/upload');
const form = new FormData();
form.append('xxhh',file,'bg.jpg');
// 第一个参数对应Content-Disposition中的name
// 第二个参数为文件数据(这里是文件真实的数据并非File对象)
// 第三个为Content-Disposition中的filename，默认为本地文件名
xhr.send(form);
xhr.onload = ()=>{
    console.log(xhr.responseText); //获取到响应结果
}