在前后分离开发中，经常会遇到上传文件的情况，后端会有一个文件上传接口，通过ajax上传成功后返回图片地址url给前端。然后在把url和其他数据以前提交给后端保存到数据库。那么如何实现ajax异步文件上传功能呢？下面就介绍下利用FormData对象的实现方案。

html代码：

<input type="file" name="file" id="imgUrl" onclick="upload()"/>

js代码：

function upload(){
    var file=document.getElementById("imgUrl").files[0];
    var form=new FormData();
    form.append('file',file);//文件
    ajax({ 
        url: _url,
        type: 'post', 
        async:true,//同步
        success: function(r){  
            //成功后代码
        },
    ); 
}

备注：

1、如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传。

2、在ajax中content-type不要传递：'application/x-www-form-urlencoded' 或者 'application/json;charset=UTF-8',不要传默认为：multipart/form-data。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/873