我有一个表格，允许我对不同页面上的另一个表格进行更改（例如；添加产品描述、输入产品 ID 和其他值）。现在，我可以编辑所有内容，例如商品描述和价格，但我还希望能够将图像上传到该表。
现在我假设我只是在管理页面的表格上做某种形式，其中有一个“上传图像”按钮，允许管理员将图像上传到表格。但是，我不完全确定如何制作，以便将图像传输到特价页面中的表格上。
我将非常感谢在这方面的一些帮助，即使它只是朝着正确的方向轻推。
我还应该注意，我希望图像进入特定列并能够进入该列的不同行。我查看了不同的 JavaScript 代码，但我发现的似乎只是上传文件而不是将其放在特定位置。
这是我的管理页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Administration</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style rel="stylesheet" type="text/css">
#myTable{
outline:none;
clear:left;
display:inline-block;
}
tr, td,th{
border-collapse: collapse;
border:1px solid;
border-radius:4px;
padding:2px;
}
th{
background-color:#FABA48;
}
td{
height:22px;
min-width:125px;
background-color:#FAD884;
}
nav[data-type="table-tools"] ul li{
display:inline-block;
list-style-type:none;
margin-right:10px;
background-color:darkgoldenrod;
border-radius:5px;
padding:5px;
}
#deleteButtons td{
background-color:darkgoldenrod;
}
nav[data-type="table-tools"] ul li a, #deleteButtons a{
font-weight:bold;
text-decoration:none;
color:#000;
opacity:0.6;
}
nav[data-type="table-tools"] ul li:hover > a, #deleteButtons a:hover{
color:#FFF;
}
#deleteButtons{
display:inline-block;
clear:right;
text-align:center;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
<script type="text/javascript">
$(document).ready(function(){$("#deleteButtons").css("display","none");var getTable=function(){$("#myTable").html("");$.get("myTable.html",function(callback_data){var table=callback_data;document.getElementById("myTable").innerHTML=table})};getTable();$("#addRow").click(function(event){event.preventDefault();var colNumber=$($("#myTable tbody tr")[0]).children("td").length;var tr=document.createElement("tr");var td="";for(var i=0;i<colNumber;i++){td=document.createElement("td");td.appendChild(document.createTextNode("\n"));
tr.appendChild(td)}$("#myTable tbody").append(tr)});$("#addColumn").click(function(event){event.preventDefault();$.each($("#myTable table thead tr"),function(){$(this).append("<th></th>")});$.each($("#myTable table tbody tr"),function(){$(this).append("<td></td>")})});$("#saveTable").click(function(event){event.preventDefault();var table=$("#myTable").html();$.post("saveTable.php",{"myTable":table},function(callback_data){$("#myTable").slideToggle("fast");if($("#deleteButtons")[0].style.display!=
"none")$("#deleteButtons").slideToggle("fast");setTimeout(function(){getTable();setTimeout(function(){$("#myTable").slideToggle();if($("#deleteButtons")[0].style.display=="none")$("#deleteButtons").slideToggle()},50)},500)})});$("#deleteRow").click(function(){if($("#deleteButtons")[0].style.display!="none"){$(this).text("Show Delete Table");$("#deleteButtons").slideToggle("fast")}else{showDeleteTable();$(this).text("Hide Delete Table")}});$("body").on("click","a.deleteRow",function(){var index=$(this).data("row-number");
$("#myTable table tbody").children("tr").eq(index).remove();showDeleteTable()});$("body").on("click","a.deleteColumn",function(){var index=$(this).data("column-number");$("#myTable table thead tr").children("th").eq(index).remove();$.each($("#myTable table tbody tr"),function(){$(this).children("td").eq(index).remove()});showDeleteTable()});function showDeleteTable(){$("#deleteButtons").html("<thead><tr><th>Delete Row</th><th>Delete Column</th></tr></thead><tbody></tbody>");var rowCount=$("#myTable table tbody tr").length;
var columnCount=$("#myTable table tbody tr").eq(0).children("td").length;var tbody=$("#deleteButtons tbody");for(var i=1;i<=rowCount;i++){var tr=document.createElement("tr");if(rowCount>1)$(tr).append('<td><a href="#" class="deleteRow" data-row-number="'+(i-1)+'">Delete Row '+i+"</a></td>");else $("#deleteButtons thead tr th").eq(0).remove();if(i<=columnCount&&columnCount>1)$(tr).append('<td><a href="#" class="deleteColumn" data-column-number="'+(i-1)+'">Delete Column '+i+"</a></td>");tbody.append(tr)}$("#deleteButtons").show()}
});
</script>
<?php
if(isset($_POST['submit'])){
$productID = $_POST['productid'];
if(empty($productID)){
die("Please enter the Product ID!");
}
$folderName = "upload_folder";
if ( !file_exists($folderName) ) {
mkdir($folderName,0775);
}
$uploadDir = $folderName. '/';
$image_name = $productID;
$allowedExts = array("gif", "jpeg", "jpg", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20971520)
&& in_array($extension, $allowedExts)){
if ($_FILES["file"]["error"] > 0){
echo "ERROR CODE: " . $_FILES["file"]["error"];
}else{
$path_parts = pathinfo($_FILES["file"]["name"]);
$extension = $path_parts['extension'];
$final_name = $uploadDir . $image_name . '.' . $extension;
move_uploaded_file($_FILES["file"]["tmp_name"], $final_name);
echo "Image Uploaded Sucessfully to: " . $final_name;
}
}else{
echo "INVALID FILE";
}
//then save $final_name (path for the image) to your database
}
?>
</head>
<body>
<h1>Table administration</h1>
<form method="post" action="" enctype="multipart/form-data">
Product ID<input type="text" name="productid" id="productid" value="" /><br />
<input type="file" name="file" id="file" /><br />
<input type="submit" name="submit" value="Upload File" />
</form>
<br /><br />
<section>
<article>
<div id="myTable" contenteditable></div>
<table id="deleteButtons">
<thead><tr><th>Delete Row</th><th>Delete Column</th></tr></thead>
<tbody></tbody>
</table>
<nav data-type="table-tools">
<ul>
<li>
<a href="#" id="addRow">New row</a>
</li>
<li>
<a href="#" id="addColumn">New column</a>
</li>
<li>
<a href="#" id="saveTable">Save table</a>
</li>
<li><a href="#" id="deleteRow">Show Delete Table</a></li>
</ul>
</nav>
</article>
</section>
</body>
</html>
这也是我的特价页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Special Offers</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
<script type="text/javascript">
/* On page load */
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable').html('');
/*We load the table */
$.get('myTable.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable').innerHTML = table;
});
};
getTable();
});
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Claybrooke Animal Feeds Limited</h1>
<p id="p1">Directors: K.R. Hall and R.J. Hall<br />Wholesale & Retail Feed Merchants'<br /> UFAS Registration 549</p>
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="special-offers.php">Special Offers</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="myTable"></div>
</div>
<div id="footer">
<?php include('includes/footer.php'); ?>
</div>
</body>
</html>
最后是实际表本身的代码
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Picture</th>
<th>Item Description</th>
<th>Was</th><th>Now</th></tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td><?php if(file_exists('upload_folder/12345.jpg')){ ?><img src="upload_folder/12345.jpg" /><?php }else{ echo "No Picture";} ?></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td><td></td></tr>
</tbody>
</table>
最后是 saveTable.php 的代码
<?php
if(!isset($_POST['myTable']))
die('No data provided.');
$table = $_POST['myTable'];
$handle = fopen('myTable.html','w');
$result = fwrite($handle,$table);
if($result)
fclose($handle);
else
die('Error writing file');
?>