首页/ 填坑/ 文章详情

FormData 配合 ajax 异步无刷新上传表格数据

JavaSctipt FormData Ajax 无刷新 IE6 兼容 发布于 2021-11-09

在制作上传图片功能时,被告知要将图片改成上传到阿里云图片服务器,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 浏览器,无需考虑兼容。

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!