在制作上传图片功能时，被告知要将图片改成上传到阿里云图片服务器，base64图片上传方式作废。项目都进入调试阶段，心里有句话不知该不该讲：TMD。日常改需求，习惯就好。心态要稳，静心，继续改代码。

程序员其实是很苦逼的群体，项目不能自主，只能听从指挥。脾气不好的人，干这行真干不了长久。扯远了，生活还得继续。由于立项时没有考虑到，采用原生的写法。图片上传到阿里的oss，需要将表单的数据提交，如何保证无刷新的情况下，异步提交数据呢？

对于额外引入第三方JS库，实现会很简单，比如：Vue.js+Element UI或插件。项目99%的都用原生写，总不能因为这点，额外增加JS体积。经过一翻搜索，成功锁定了 FormData。

HTML 代码：

HTML<form id="uploadForm" method="post" action="" enctype="multipart/form-data" >
    <input type="file" name="files"  onchange="upload()" />
</form>

JavaScript 代码：

JSvar upload = function() {
    var form = document.getElementById("uploadForm");
    var formData = new FormData(form);
    formData.append('files', formData.get("files"));
    
    $.ajax({
        url:'/upload/image', 
        type: 'post', 
       dataType: "json",
       data: formData, 
       processData: false, 
       contentType: false, 
       success: function(result){
            console.log('result:',result)
       }
   });
}

声明FormData后，使用get（）函数获取值，获得的数据与form使用post方式提交后的数据一致。有人问了，FormData这么简单实现无刷新数据，为什么以前没有推扩使用？这还得从浏览器的发展吏说起，win操作系统随着盗版进入国内，默认安装的是IE6浏览器。

那些年，国内会使用电脑的用户不多，很多都是小白用户，你就别指望用户会主动升级浏览器。IE6浏览器在特殊时间，一直霸占浏览器入口。企业为了使用户正常浏览网站，兼容早已被淘汰的IE6浏览器。现今大名鼎鼎的淘宝，也曾忍受多年IE6的毒打，随着win 7普及才“硬”起来，不再兼容IE6浏览器。

使FormData，需要考虑用户的浏览器，不是所有的浏览都支持。恰好项目只需支持 Chrome 浏览器，无需考虑兼容。