原生js封装ajax发送文件(持续更新)

本文介绍了一种使用原生JavaScript实现AJAX发送文件的方法,通过自定义函数模仿jQuery的$.ajax功能,实现文件的异步上传,并强调了服务端需设置跨域的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原生js实现ajax发送文件

传入一个对象,类似于jquery的$.ajax(对象)的用法
window.ajaxFiles=(obj)=>{
	//url,可加可不加'/'
	let url=obj.url.startsWith('/')?obj.url:'/'+obj.url;
    //发送的对象
    let data=obj.data||{};
    //成功的回调函数
    let func=obj.func;
    //类型检测
    if(typeof url !=='string')
        throw new Error('url must be string !');
    if(typeof data !=='object')
        throw new Error('data must be one object');
    if(typeof func !=='function')
        throw new Error('func must be one function!');
	let xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
    if(!xml){
        alert('浏览器无法创建XMLHttpRequest和ActiveXObject对象');
    }
    xml.onreadystatechange=()=>{
        if(xml.readyState===4&&xml.status===200){
            if(xml.responseText instanceof String){
                func(xml.responseText);
            }
            func(JSON.parse(xml.responseText));
        }
    };
    xml.open('post','/'+url,true);
    xml.send(parseData(data));
    //将普通对象转换为formData
    function parseData(obj) {
        let form=new FormData();
        for(let i in obj){
            form.append(i,obj[i]);
        }
        return form;
    }
};

使用实例

ajaxFiles({
                url:'register',
                data:{
                    name:'lfb',
                    //getNode是我封装的获取节点的方法,可以使用最基本的获取节点的方法
                    //获取input file框的文件
                    file:getNode('#file').files[0]
                },
                func:(res)=>{
                    console.log(res);
                }
            })

注意!!!要在服务端设置允许跨域!
作者寄语
   我亲测有效,如发现bug,请留言,万分感谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值