-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 回答