jq formdata.append is not a function

当我们在使用jQuery的FormData对象的append方法时出现了"formData.append is not a function"的错误信息时，这通常是因为我们错误地调用了该方法。

首先，我们需要确保我们已经正确地创建了一个FormData对象。创建FormData对象的正确方式是使用new关键字，如下所示：

var formData = new FormData();

接下来，我们需要调用append方法来向FormData对象中添加数据。append方法的正确使用方式是传递两个参数：键和值。例如：

formData.append("key", "value");

此外，如果我们要上传文件，我们需要将文件对象作为值传递给append方法，而不是文件的路径。例如：

var fileInput = document.getElementById("fileInput");
formData.append("file", fileInput.files[0]);

综上所述，当出现"formData.append is not a function"错误时，首先要检查是否正确创建了FormData对象，然后检查是否正确使用了append方法，并且正确传递了参数。另外，需要注意的是，FormData对象的append方法在一些旧的浏览器版本中不受支持，因此在使用之前最好检查浏览器的兼容性。

相关问题

jq ajax 分块上传

可以使用 jQuery 的 $.ajax() 方法和 FormData 对象来实现分块上传。

以下是一个基本的分块上传例子：

function uploadFile(file) {
  var chunkSize = 1024 * 1024; // 1MB per chunk
  var totalChunks = Math.ceil(file.size / chunkSize);
  var currentChunk = 0;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      currentChunk++;
      if (currentChunk < totalChunks) {
        uploadChunk(currentChunk);
      } else {
        console.log('Upload complete!');
      }
    } else {
      console.log('Upload failed!');
    }
  };
  
  function uploadChunk(chunk) {
    var start = chunk * chunkSize;
    var end = Math.min(start + chunkSize, file.size);
    var chunkData = file.slice(start, end);
    
    var formData = new FormData();
    formData.append('file', chunkData);
    formData.append('chunk', chunk);
    formData.append('totalChunks', totalChunks);
    
    xhr.send(formData);
  }
  
  uploadChunk(currentChunk);
}

上述代码中，我们首先计算出文件需要切分成多少个块，然后使用 XMLHttpRequest 对象发送每个块的数据。在每个块上传完成后，我们检查是否还有未上传的块，如果有，则继续上传下一个块，否则表示上传完成。

需要注意的是，服务器端需要支持分块上传，并且能够处理每个块的数据。在服务器端，我们可以使用类似以下的代码来接收分块上传的数据：

app.post('/upload', function(req, res) {
  var chunk = req.body.chunk;
  var totalChunks = req.body.totalChunks;
  var fileData = req.files.file.data;
  // ...
});

在实际开发中，我们可以根据具体的需求来优化分块上传的实现，例如可以使用 Web Workers 来并行上传多个块，或者使用断点续传来提高上传的可靠性等。

jq写附件上传可支持一个页面多个附件上传，可以查看、删除、放大、缩小、成功后放回id存入数据库

你好，关于你的问题，我可以提供一份基于jQuery的多文件上传代码给你参考。这份代码可以支持一个页面上传多个附件，同时还可以进行查看、删除、放大、缩小等操作。在文件上传成功后，它也可以将文件的id存入数据库。以下是代码示例：

HTML代码：

<div class="file_upload">
  <input type="file" name="file[]" multiple>
  <button id="upload_btn">上传</button>
</div>
<div class="file_list"></div>

JavaScript代码：

$(function() {
  // 上传按钮点击事件
  $('#upload_btn').on('click', function() {
    // 获取所有选中的文件
    var files = $('input[type="file"]')[0].files;
    // 如果没有选中文件，直接返回
    if (!files || files.length === 0) {
      return;
    }
    // 遍历文件列表
    for (var i = 0; i < files.length; i++) {
      // 创建FormData对象，用于上传文件
      var formData = new FormData();
      formData.append('file', files[i]);
      // 发起ajax请求上传文件
      $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
          // 上传成功后，将文件id存入数据库，并将文件信息展示在页面上
          var res = JSON.parse(data);
          if (res.code === 0) {
            var fileId = res.data.id;
            var fileName = res.data.name;
            var fileSize = res.data.size;
            var fileUrl = res.data.url;
            var fileHtml = '<div class="file_item" data-id="' + fileId + '">' +
              '<div class="file_name">' + fileName + '</div>' +
              '<div class="file_size">' + fileSize + '</div>' +
              '<div class="file_actions">' +
              '<a href="' + fileUrl + '" target="_blank">查看</a>' +
              '<a href="javascript:;" class="delete_file">删除</a>' +
              '<a href="javascript:;" class="zoom_in">放大</a>' +
              '<a href="javascript:;" class="zoom_out">缩小</a>' +
              '</div>' +
              '</div>';
            $('.file_list').append(fileHtml);
          }
        }
      });
    }
  });

  // 文件删除按钮点击事件
  $('.file_list').on('click', '.delete_file', function() {
    var fileId = $(this).closest('.file_item').attr('data-id');
    // 发起ajax请求删除文件
    $.ajax({
      url: '/delete',
      type: 'POST',
      data: {id: fileId},
      success: function(data) {
        // 删除文件成功后，从页面上移除文件信息
        var res = JSON.parse(data);
        if (res.code === 0) {
          $(this).closest('.file_item').remove();
        }
      }
    });
  });

  // 放大按钮点击事件
  $('.file_list').on('click', '.zoom_in', function() {
    // 获取当前文件的url，使用fancybox展示
    var fileUrl = $(this).closest('.file_item').find('a:first').attr('href');
    $.fancybox.open(fileUrl);
  });

  // 缩小按钮点击事件
  $('.file_list').on('click', '.zoom_out', function() {
    $.fancybox.close();
  });
});

请注意，上述代码仅提供参考，需要根据实际情况进行修改和适配。同时，代码中的文件上传、删除等接口需要后端提供支持。