gpt4 book ai didi

javascript - AJAX上传动态创建的HTML文件

转载 作者:行者123 更新时间:2023-12-02 21:48:56 25 4
gpt4 key购买 nike

我有一个网页,允许下拉元素动态创建 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,该方法适用于使用表单方法的IOS应用程序,所以我知道这部分很好。

我需要帮助的部分是如何将 DOM 对象作为文件上传并将其正确附加到表单中,指定该文件的名称,以便后端可以将其保存为该文件名。

相比 jquery,我更喜欢 javascript。但是我找不到任何好的用于 AJAX 文件上传的 javascript 代码,所以我这里有 jquery。

最佳答案

您可以使用 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);

或者这两个链接可能对您有帮助:Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

https://javascript.info/blob

关于javascript - AJAX上传动态创建的HTML文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60177761/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com