通過AJAX以純JavaScript發送表單（無jQuery）

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>

Answer 2

將<span>元素替換為<button>元素，使用附加在#submitFile元素上的click事件處理程序； XMLHttpRequest() FormData()處的FormData()在<input type="file"> .files對象內發送File對象； 除去action屬性在<form>元素，設置URL的XMLHttpRequest.prototype.open()來URL提供用於PUT請求

<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>

通過AJAX以純JavaScript發送表單（無jQuery）

問題描述

2 個解決方案

解決方案1
0 2016-10-08 23:02:23

解決方案2
0 2016-10-08 23:05:21

通過AJAX以純JavaScript發送表單（無jQuery）

問題描述

2 個解決方案

解決方案1 0 2016-10-08 23:02:23

解決方案2 0 2016-10-08 23:05:21

解決方案1
0 2016-10-08 23:02:23

解決方案2
0 2016-10-08 23:05:21