別のページにある別のテーブルに変更 (製品説明の追加、製品 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');
?>