-1

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

2 に答える 2

1

あなたの質問は正直言ってあまり明確ではありません。ユーザーが表のセルをクリックし、画像をアップロードして、この画像を同じ表のセルに表示できるようにしたいと思います。

私は次のことから始めます:

  1. ファイルのアップロードを使用してフォームを作成し、表示をなしに設定します。
  2. クリック イベント ハンドラをテーブル セルに追加し、隠しフォームのファイル アップロードを処理するように設定します。
  3. イメージをファイルシステムに保存するスクリプトを作成し、データベースにリンクを書き込みます
  4. サーバー上の画像のスクリプトリターンリンクを持っています
  5. テーブルセルに画像を含む画像要素を書き出す
于 2013-07-12T14:40:08.520 に答える
0

例えば:

<?php

if(isset($_POST['submit'])){

    $uploadDir = 'images/';
    $image_name = time()."-";


    $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{

          $final_name = $uploadDir . $image_name . $_FILES["file"]["name"];
          move_uploaded_file($_FILES["file"]["tmp_name"], $final_name);

    }
  }else{
      echo "INVALID FILE";
  }

  //then save $final_name (path for the image) to your database

}

?>

<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

画像を表示するには、画像パスを含む行を選択するだけです:

<?php

$sql = "SELECT .......";

?>

<img src="<?= $row[image]?>;" />

ワーキングテストページ:

<?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

}
?>
<!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>Upload Test</title>
</head>
<body>
<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 />
<div id="myTable">
  <table border=1>
    <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>Vestibulum dolor sapien, bibendum non dolor nec, vehicula suscipit dolor. Maecenas viverra porta lorem, vitae aliquam neque facilisis vitae.</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>54321</td>
        <td><?php if(file_exists('upload_folder/54321.jpg')){ ?><img src="upload_folder/54321.jpg" /><?php }else{ echo "No Picture";} ?></td>
        <td>Vestibulum dolor sapien, bibendum non dolor nec, vehicula suscipit dolor. Vitae aliquam neque facilisis vitae.</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
于 2013-07-12T14:48:28.877 に答える