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