var form = document.querySelector("#formId"); var formdata = new FormData(form);获取不到form表单中的数据

可能是因为您没有为表单中的每个元素设置“name”属性，或者“name”属性值为空。请确保每个表单元素都有“name”属性，并且“name”属性值不为空。例如：

<form id="formId">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

然后您可以使用以下代码来获取表单数据：

var form = document.querySelector("#formId");
var formdata = new FormData(form);
console.log(formdata.get('username')); // 输出用户输入的用户名
console.log(formdata.get('password')); // 输出用户输入的密码

相关问题

根据下面异步上传文件夹的代码补全html的内容并解释每一行代码的意思function uploadFolder(event) { event.preventDefault(); var folder = event.target.files[0]; var formData = new FormData(); formData.append('folder', folder); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://127.0.0.1:8888/api/private/v1/upload', true); xhr.onload = function () { if (xhr.status === 200) { console.log('上传成功'); } else { console.log('上传失败'); } }; xhr.send(formData); } document.querySelector('#folderInput').addEventListener('change', uploadFolder);

可以将下面的代码添加到HTML中，其中包括一个文件上传的表单和一个用于显示上传结果的区域。

<form>
  <label for="folderInput">选择文件夹:</label>
  <input type="file" id="folderInput" webkitdirectory multiple>
</form>
<div id="result"></div>

代码解释如下：

1. `event.preventDefault();` 防止表单默认提交。
2. `var folder = event.target.files[0];` 获取选择的文件夹。
3. `var formData = new FormData();` 创建一个FormData对象。
4. `formData.append('folder', folder);` 将文件夹添加到formData中。
5. `var xhr = new XMLHttpRequest();` 创建一个XMLHttpRequest对象。
6. `xhr.open('POST', 'http://127.0.0.1:8888/api/private/v1/upload', true);` 指定请求的方法、URL和是否异步处理。
7. `xhr.onload = function () { ... }` 当请求完成时，执行回调函数。
8. `xhr.send(formData);` 发送请求并传递formData作为参数。
9. `document.querySelector('#folderInput').addEventListener('change', uploadFolder);` 当文件输入框的值发生改变时，调用uploadFolder函数。
10. `console.log('上传成功');` 打印上传成功的消息。
11. `console.log('上传失败');` 打印上传失败的消息。
12. `webitdirectory` 属性允许用户选择文件夹而不是文件。

<td contenteditable="true" id="cell_1_1"><input type="text" oninput="filterTable(1)" placeholder="aoiStep" id="input_1_1"></td> <td contenteditable="true" id="cell_1_2"><input type="text" oninput="filterTable(2)" placeholder="defectType" id="input_1_2"></td> <td contenteditable="true" id="cell_1_3"><input type="text" oninput="filterTable(3)" placeholder="layerCode" id="input_1_3"></td> <td contenteditable="true" id="cell_1_4"><input type="text" oninput="filterTable(4)" placeholder="type"id="input_1_4"></td> <td contenteditable="true" id="cell_1_5"><input type="text" oninput="filterTable(5)" placeholder="dpet" id="input_1_5"></td> <td contenteditable="true" id="cell_1_6"><input type="text" oninput="filterTable(6)" placeholder="subcode" id="input_1_6"></td> <td contenteditable="true" id="cell_1_7"><input type="text" placeholder="codeDescription" id="input_1_7"></td> <td contenteditable="true" id="cell_1_8">image1</td> <td contenteditable="true" id="cell_1_9">image2</td> <td contenteditable="true" id="cell_1_10">image3</td> <td contenteditable="true" id="cell_1_11">image4</td> <td contenteditable="true" id="cell_1_12">image5</td> <td contenteditable="true" id="cell_1_13"><input type="text" placeholder="determination_rule"id="input_1_8"></td> function submitData(button) { var row = button.parentNode.parentNode; var aoiStep = row.querySelector("#input_1_1").value; var defectType = row.querySelector("#input_1_2").value; // 获取其他列的数据... // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理返回的结果 var result = xhr.responseText; console.log(result); } }; // 发送POST请求 xhr.open("POST", "insert.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 将表格数据作为请求参数发送到后端 var data = "aoiStep=" + encodeURIComponent(aoiStep) + "&defectType=" + encodeURIComponent(defectType) + "&..."; xhr.send(data); } 这是我表格的表头，和链接数据库的代码我已经在数据库创建了表，以及对应的字段，现在要实现在数据库中显示我网页添加的详细文字内容，以及将图片存放到本地文件夹后生成唯一的图片文件名，并且将图片路几个保存在数据库，我需要对上面代码进行怎样的修改

要实现在数据库中显示网页添加的详细文字内容以及保存图片文件名和路径，你需要对代码进行以下修改：

1. 在 `submitData` 函数中，获取其他列的数据并构建请求参数时，添加图片文件的处理。修改代码如下：

function submitData(button) {
  var row = button.parentNode.parentNode;
  var aoiStep = row.querySelector("#input_1_1").value;
  var defectType = row.querySelector("#input_1_2").value;
  // 获取其他列的数据...

  // 创建 FormData 对象，用于存储表格数据和图片文件
  var formData = new FormData();
  formData.append("aoiStep", aoiStep);
  formData.append("defectType", defectType);
  // 添加其他表格数据...

  // 添加图片文件到 FormData 对象
  var image1File = row.querySelector("#input_1_8").files[0];
  formData.append("image1", image1File);
  // 添加其他图片文件...

  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理返回的结果
      var result = xhr.responseText;
      console.log(result);
    }
  };

  // 发送 POST 请求
  xhr.open("POST", "insert.php", true);
  xhr.send(formData);
}

在上述代码中，我们使用 `FormData` 对象来存储表格数据和图片文件。首先创建一个 `FormData` 对象，并使用 `formData.append()` 方法添加表格数据（例如 `aoiStep` 和 `defectType`）到对象中。然后，通过查询表单元素的方式获取图片文件，并将其添加到 `FormData` 对象中。

2. 修改 PHP 后端代码 `insert.php`，以保存图片文件并将图片路径存储到数据库中。具体修改方式如下：

// 获取表单提交的数据
$aoiStep = $_POST['aoiStep'];
$defectType = $_POST['defectType'];
// 获取其他表格数据...

// 获取图片文件并保存到指定文件夹
$image1Name = uniqid() . '_' . $_FILES['image1']['name'];
$image1Path = "path/to/save/" . $image1Name;
move_uploaded_file($_FILES['image1']['tmp_name'], $image1Path);
// 获取其他图片文件并保存...

// 执行数据库插入操作
$sql = "INSERT INTO tms_jianben (aoi_step, defect_type, layer_code, type, dpet, subcode, code_description, image1_path, image2_path, image3_path, image4_path, image5_path, determination_rule) VALUES ('$aoiStep', '$defectType', '$layerCode', '$type', '$dpet', '$subcode', '$codeDescription', '$image1Path', '$image2Path', '$image3Path', '$image4Path', '$image5Path', '$determinationRule')";
// 执行数据库插入操作...

在上述代码中，我们获取表单提交的数据（例如 `aoiStep` 和 `defectType`），然后获取图片文件并将其保存到指定文件夹。我们使用 `uniqid()` 函数生成唯一的图片文件名，并通过 `move_uploaded_file()` 函数将图片文件移动到指定文件夹。

接下来，在数据库插入操作的 SQL 语句中，将图片路径（例如 `$image1Path`）存储到对应的字段中。

请注意，你需要将 `"path/to/save/"` 替换为你想要保存图片的实际文件夹路径。

这样，当你点击提交按钮时，表格数据和图片文件将会被发送到后端 PHP 脚本进行处理，并将图片路径存储到数据库中。

希望这个修改对你有所帮助！如果你还有其他问题，请随时提问。