javascript - 使用纯 JavaScript(无 jQuery)通过 AJAX 发送表单

Question

我有以下表单，我想通过 AJAX 请求发送。我不确定如何继续“xmlhttp.open”行。我正在尝试将视频文件上传到第三方视频托管网站(使用他们的 API)，他们为我提供了一个 URL('upload_link_secure')来上传文件。请问有人可以建议吗？

我的 HTML:

<form id="upload" action="'+upload_link_secure+'" method="PUT" enctype="multipart/form-data">
  <input type="file" id="vidInput">
  <button type="submit" id="submitFile" onclick="uploadMyVid(\''+upload_link_secure+'\')">Upload Video</button>
</form> 

我的 JavaScript:

 var uploadMyVid = function(upload_link_secure){

        var form = document.getElementById('upload')

        // FETCH FILEIST OBJECTS
        var vidFile = document.getElementById('vidInput').files;

        var xmlhttp = new XMLHttpRequest;

        xmlhttp.open('PUT', );  // NOT SURE HOW TO COMPLETE THIS LINE???
        xmlhttp.send(vidFile);

    }

Answer 1

首先，您的 action 属性不正确，请更改为某些端点，例如 /upload。

这是一个没有服务器端的简单示例。

var form = document.getElementById("upload-form"),
        actionPath = "";
        formData = null;

    var xhr = new XMLHttpRequest();

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        
        formData = new FormData(form);
        actionPath = form.getAttribute("action");

        xhr.open("POST", actionPath);
        xhr.send(formData);

    }, false);

<form id="upload-form" action="/upload" method="POST" enctype="multipart/form-data">
      <input type="file" id="file">
      <button type="submit">Upload Video</button>
</form>