原生js ajax 上传图片,原生JS上传图片、保存图片(ajax,form两种提交)

1. 技术栈前端/后端 原生JS

2.代码部分

2.1 前端

2.1.1 Form表单提交方式　　文件名: upload.form.html

upload by form

window.οnlοad=()=>{

const avatar=document.getElementById("avatar");

const img=document.getElementById("img");

avatar.οnchange=e=>{

const file=e.target.files[0];//创建读取文件的对象

const reader= newFileReader();//使用该对象读取file文件

reader.readAsDataURL(file);//读取文件成功后执行的方法函数

reader.οnlοad= function(e) {//读取成功后返回的一个参数e，整个的一个进度事件

//选择所要显示图片的img，要赋值给img的src就是e中target下result里面

//的base64编码格式的地址

img.src=e.target.result;

};

};

};