利用ajax以及formData实现文件上传

本文介绍使用jQuery及原生JS实现文件上传的方法。通过实例展示了如何利用FormData对象进行文件读取及发送,并通过AJAX完成文件上传的过程。

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

<input type="file" id="file">
利用jquery实现上传
var el = $('#file')[0];
var formData = new FormData();
//如果没有el.files[0],则不执行后续操作
if(!el.files[0]){
    return;
 }
formData.append('file', el.files[0]);
$.ajax({
    url: '上传地址',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false, //不处理发送数据
    contentType: false  //不设置请求头
}).done(function(res) {
    //上传成功操作
}).fail(function(res) {
    //上传失败操作
});
利用原生js实现上传
var el = $('#file')[0];
var formData = new FormData();
//如果没有el.files[0],则不执行后续操作
if(!el.files[0]){
    return;
 }
formData.append('file', el.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('post', url地址);
xhr.onload = function(e) {
  var args =JSON.parse(e.currentTarget.response);
  // 通过返回数据的args中state字段判断上传状态
}
xhr.send(formData)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值