我编写了一个脚本,可以很好地添加房间名称、描述等。它使用 jquery 自动保存和附加额外的表单。除了我尝试使用之外,这一切都绝对完美<input type="file">
. 我不想使用已经存在的插件,因为当我单击保存/触发自动保存时,所有可见表单中的数据都会使用 php 和 mysqli 自动保存或更新到数据库中,然后返回每个插入 id,所以这很重要打破,并且使用插件可能会破坏我的系统,因为它按照我现在需要的方式工作。
理想情况下,我希望在每个保存到数据库的表单中实现每个文件输入中的相关文件名,就像其他表单信息一样,然后触发上传到文件夹。我希望我已经尽我所能解释了,这有点令人困惑
以下是我所有的相关代码。如果您能提供任何启发,我将不胜感激!
表格页面:
<body>
<div id="formHolder">
<div class="addItem">
<form method="post" action="add_room.php">
<label for="itemName[]">Item</label>
<input type="text" name="itemName[]">
<label for="itemCondition[]">Condition</label>
<input type="text" name="itemCondition[]">
<input type="file" name="itemPhoto[]">
<input type="hidden" name="itemId[]" value="">
<input type="hidden" name="itemParent[]" value="<?=$_GET['room']?>">
<div class="saveIcon" style="display: none; color: green;">SAVED!</div>
<div class="save">Save Item</div>
</form>
</div>
</div>
<div id="addForm">Add another room</div>
<br><br>
<div id="message"></div>
</body>
jQuery:
<script>
function postForm(form) {
var $this = $(form);
var string = $this.serialize();
$.ajax({
type: "POST",
url: "add_room.php",
data: string,
cache: false,
success: function(data){
var saveIcon = $this.find('.saveIcon');
$this.find('[type=hidden]').val(data);
saveIcon.fadeIn(750);
saveIcon.delay(500).fadeOut(750);
$('#message').text('The id of the inserted information is ' + data);
}
});
}
function autosave() {
$('form').each(function() {
postForm(this);
});
}
setInterval(autosave, 10 * 1000);
$(document).ready(function() {
$('body').on('click', '.save', function(e) {
postForm($(this).closest('form').get(0));
});
$('#addForm').on('click', function(){
$('<form method="post" action="add_room.php"><label for="itemName[]">Item</label><input type="text" name="itemName[]"><label for="itemCondition[]">Condition</label><input type="text" name="itemConition[]"><input type="file" name="itemPhoto[]"><input type="hidden" name="itemId[]" value=""><input type="hidden" name="itemParent[]" value="<?=$_GET["room"]?>"><div class="saveIcon" style="display: none; color: green;">SAVED!</div><div class="save">Save Item</div></form>').fadeIn(500).appendTo('.addItem');
});
});
</script>
PHP:
<?PHP
require_once('dbConfig.php');
$item = $_POST['itemName'];
$condition = $_POST['itemCondition'];
$photo = $_POST['itemPhoto'];
$id = $_POST['itemId'];
$parentId = $_POST['itemParent'];
foreach($item as $key => $val) {
if(!$id[$key]) {
if ($stmt = $db->prepare("INSERT test (test_title, test_desc, test_parent, test_photo) VALUES (?, ?, ?, ?)"))
{
// Use an s per variable passed to the string, example - "ss", $firstname, $lastname
$stmt->bind_param("ssis", $val, $condition[$key], $parentId[$key], $photo[$key]);
$stmt->execute();
$stmt->close();
echo $db->insert_id;
//echo "success";
}
// show an error if the query has an error
else
{
echo "ERROR: Could not prepare Insert SQL statement.";
}
}
else
{
if ($stmt = $db->prepare("UPDATE test SET test_title = ?, test_desc = ?, test_photo = ? WHERE test_id = ?"))
{
// Use an s per variable passed to the string, example - "ss", $firstname, $lastname
$stmt->bind_param("ssi", $val, $photo[$key], $id[$key]);
$stmt->execute();
$stmt->close();
echo $id[$key];
//echo "success";
}
// show an error if the query has an error
else
{
echo "ERROR: Could not prepare Update SQL statement.";
}
}
}
?>