前端笔记-小鱼博客 · 一个小小程序员的世界

小鱼Blog

您现在的位置是:首页 > 个人博客 > 前端笔记

前端笔记

如何使用jquery的ajax上传formData文件、图片

2020-04-15 前端笔记 243
如何使用jQuery中的ajax上传form表单的文件或者图片?并把其中一些数据放在header中

如何使用jQuery中的ajax上传form表单的文件或者图片?并把其中一些数据放在header中

近期做了这个功能,由于第一次这样传数据,一个key就把我蒙圈了,浪费了一上午时间!技术真实不能马虎!

正文来了!


一、new一个FormData对象,然后对象中append新增值

var formData = new FormData();

formData.append('参数名',$("#file")[0].files[0]);//avatar是参数名,第二个是参数值,是你要上传的input哦!

二、使用jquery的ajax上传

$.ajax({
    url: '/user/setting/avatar',
    type: 'POST',
    data: formData,
    beforeSend:function(request){ //这里是往header传值方式
        request.setRequestHeader('uid',uid);
        request.setRequestHeader('timestamp',timestamp);
        request.setRequestHeader('sign',sign);
    },
    contentType:false,
    processData: false
}).done(function(res) {
    console.log(res);
    //回显图片
}).fail(function(res) {
    console.log(res);
});

大功告成!有问题留言讨论哦!

文章评论

244 人参与,0条评论
暂无评论!期待你的回答!