<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); } 这是我表格的表头,和链接数据库的代码我已经在数据库创建了表,以及对应的字段,现在要实现在数据库中显示我网页添加的详细文字内容,以及将图片存放到本地文件夹后生成唯一的图片文件名,并且将图片路几个保存在数据库,我需要对上面代码进行怎样的修改
时间: 2023-09-24 16:04:17 浏览: 108
要实现在数据库中显示网页添加的详细文字内容以及保存图片文件名和路径,你需要对代码进行以下修改:
1. 在 `submitData` 函数中,获取其他列的数据并构建请求参数时,添加图片文件的处理。修改代码如下:
```javascript
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`,以保存图片文件并将图片路径存储到数据库中。具体修改方式如下:
```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 脚本进行处理,并将图片路径存储到数据库中。
希望这个修改对你有所帮助!如果你还有其他问题,请随时提问。
阅读全文