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

最新推荐文章于 2021-08-05 17:09:01 发布

原创最新推荐文章于 2021-08-05 17:09:01 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 #formData

解决方案专栏收录该内容

35 篇文章

订阅专栏

本文介绍使用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)