湛江阿里云代理商：ajax异步上传文件

luotuoemo • 2023年12月31日 16:56 • 阿里云 • 阅读 2107

使用ajax异步上传文件的步骤如下：

创建一个表单，并将其enctype属性设为multipart/form-data，以允许提交二进制文件。

<form id="myForm" enctype="multipart/form-data">
  <input type="file" name="myfile">
  <button type="submit">Upload</button>
</form>

编写ajax代码，在提交之前禁用表单默认的提交行为，并使用FormData对象获取表单数据。

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();

    // 设置响应函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log('上传成功！');
        }
    }

    // 发送ajax请求
    xhr.open('POST', '/upload', true);
    xhr.send(formData);
});

在服务器端处理上传文件。将接收到的文件存储在服务器文件系统中，并返回上传成功的消息。

const http = require('http');
const formidable = require('formidable');
 
http.createServer((req, res) => {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
      // 将文件存储到服务器中
      var oldpath = files.myfile.path;
      var newpath = 'path/to/file' + files.myfile.name;
      fs.rename(oldpath, newpath, (err) => {
        if (err) throw err;
        res.write('上传成功！');
        res.end();
      });
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form enctype="multipart/form-data" method="post" action="/upload">');
    res.write('<input type="file" name="myfile"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(8080);

通过以上步骤，即可实现ajax异步上传文件。

在网页中使用Ajax异步上传文件，可以使用XMLHttpRequest对象来实现。以下是一个基本的示例：

HTML代码：

<form id="upload-form">
  <input type="file" name="file">
  <button type="submit">上传文件</button>
</form>

JavaScript代码：

var form = document.getElementById('upload-form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认的提交行为

  var formData = new FormData(form); // 创建FormData对象
  var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象

  // 绑定上传进度事件
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var percent = Math.round(event.loaded / event.total * 100);
      console.log(percent + '% 已上传');
    }
  });

  // 绑定上传完成事件
  xhr.addEventListener('load', function(event) {
    console.log('上传完成');
  });

  // 发送上传请求
  xhr.open('POST', '/upload');
  xhr.send(formData);
});

在上面的代码中，创建了一个FormData对象，通过form表单元素来获取文件数据和其他表单数据。然后创建了一个XMLHttpRequest对象，使用open()方法指定上传请求的URL和请求方法，使用send()方法发送包含文件数据的FormData对象。