AJAX 上傳動態創建的 HTML 文件

Question

我有一個允許下拉元素動態創建 HTML 的網頁。 在此頁面上，我還有一個“創建文件”按鈕。 當我單擊此按鈕時，我希望它發出 AJAX POST 請求並上傳我通過拖放創建的動態頁面以作為文件上傳。

這是一個簡單的 HTML 文件，用於可視化文件的外觀：

<!doctype html>
<html>

<head>
  <title>Test Drag and Drop</title>
</head> 

<body>
     <div class="dynamicPage">

          <div class="subSections">
          </div>

          <div class="subSections">
          </div>

           <!-- more elements and objects in here -->
     </div>

     <div class="stripFromPage">

          <!-- More buttons for drag and drop elements to main page -->
         <button onclick="createFile(this)">Create File</button>
     </div>
</body>

 <script>

   function createFile(elem){

   let url = "action/saveFile";

   var formData = new FormData();

   formData.append('filename', 'test.html');
   formData.append('file', $("html").html());


   $.ajax({
      type: 'POST',
      url: url,
      data: formData,
      contentType: false,
      processData: false,
      success: function (data) {
      alert(data);
      }
   });

  }


 </script>

在服務器端，我有一個帶有上傳方法的 node.js，該方法適用於使用 form 方法的 IOS 應用程序，所以我知道這部分很好。

我需要幫助的部分是如何將 DOM 對象作為文件上傳並將其附加到正確的表單中，指定此文件的名稱以便后端可以將其保存為該文件名。

我更喜歡 javascript 而不是 jquery。 但是我找不到任何用於 AJAX 文件上傳的好的 javascript 代碼，所以我在這里有 jquery。

Answer 1

您可以使用 HTML 字符串創建一個 Blob 對象並將其發送到服務器（未經測試）。

var formData = new FormData();
formData.append('filename', 'test.html');
var dynamicPage = $(elem).html(); // the body of the new file...
var fileBlob = new Blob([dynamicPage], { type: "text/html"});
formData.append('file', fileBlob);

或者這兩個鏈接可能對您有所幫助：使用 HTML 元素中的數據創建 Javascript Blob()。 然后將其下載為文本文件

https://javascript.info/blob

AJAX 上傳動態創建的 HTML 文件

問題描述

1 個解決方案

解決方案1
1 已采納 2020-02-11 21:54:07

AJAX 上傳動態創建的 HTML 文件

問題描述

1 個解決方案

解決方案1 1 已采納 2020-02-11 21:54:07

解決方案1
1 已采納 2020-02-11 21:54:07