使用纯JavaScript（无jQuery）通过AJAX发送表单

Question

使用纯JavaScript（无jQuery）通过AJAX发送表单

4

我有一个表单，想通过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);

    }

- dave

这比仅仅发送完整的文件列表要复杂一些，但基本上参数是.open(method, url)，因此您必须添加要上传的URL。 - adeneo

我认为你可以根据文档完成它。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open - Smile0ff

我对表单元素中的“action”属性有点困惑。我的想法是，该元素会将文件发送到URL。那么，在xmlhttp.open行中是否仍需要复制此请求？ - dave

你是在试图使用<form>还是XMLHttpRequest()发送文件吗？ - guest271314

请使用提供的URL。 - guest271314

显示剩余4条评论

2个回答

1

用<span>元素替换<button>元素，使用附加到#submitFile元素的click事件处理程序；在XMLHttpRequest()中使用FormData()发送<input type="file"> .files对象中的File对象；删除<form>元素上的action属性，将XMLHttpRequest.prototype.open()的URL设置为提供给PUT请求的URL。

<body>
  <form id="upload">
    <input type="file" id="vidInput">
    <span id="submitFile" 
      style="-webkit-appearance:button;-moz-appearance:button;padding:4px;font-family:arial;font-size:12px">Upload Video</span>
  </form>
  <script>
    function uploadMyVid(event) {

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

      var xmlhttp = new XMLHttpRequest;

      xmlhttp.open('PUT', "upload_link_secure");

      var data = new FormData();
      data.append("file", vidFile[0], vidFile[0].name);

      xmlhttp.send(data);

    }

    var button = document.getElementById("submitFile");
    button.addEventListener("click", uploadMyVid);
  </script>
</body>

- guest271314

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Smile0ff · Accepted Answer

首先，您的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>