Question

真的只是寻找一些建议。我的网站上有一个小表格，我正在建设：

名称
电子邮件
数
CV（附件）

之前我已经完成了表格，但是添加了附件我不知道如何去做。

我习惯使用jQuery的序列化函数。是否有类似的东西我可以用来在我的Ajax调用中发布？我似乎无法在网上找到很多信息..

Answer 1

对于AJAX请求，您无法真正使用.serialize()函数。您需要使用FormData()。你也可以放一个进度条。我们需要首先检查支持：

function supportAjaxUploadWithProgress() {
  return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData();

  function supportFileAPI() {
    var fi = document.createElement('INPUT');
    fi.type = 'file';
    return 'files' in fi;
  };

  function supportAjaxUploadProgressEvents() {
    var xhr = new XMLHttpRequest();
    return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
  };

  function supportFormData() {
    return !! window.FormData;
  }
}

下一步是使用AJAX提交表单：

var form = document.getElementById('form-id');
var formData = new FormData(form);

你必须拥有这些HTML：

＆＃13;

var form = document.getElementById('the-form');
form.onsubmit = function() {
  var formData = new FormData(form);

  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  // Add any event handlers here...
  xhr.open('POST', form.getAttribute('action'), true);
  xhr.send(formData);

  return false; // To avoid actual submission of the form
}

＆＃13;

<form id="the-form" action="/upload/path" enctype="multipart/form-data">
  <input name="file" type="file">
  <input type="submit" value="Upload" />
</form>

＆＃13;

更多信息：Ridiculously simple Ajax uploads with FormData。

PHP AJAX JQuery附件电子邮件

1 个答案: