如何使用javaScript上传图像文件

时间：2013-07-12 14:35:35

标签： javascript

我有一个表格，允许我进行更改（例如;添加产品说明，输入产品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');
?>

2 个答案:

答案 0 :(得分：1)

说实话，你的问题不是很清楚。我假设您希望用户能够单击表格单元格，上传图像并在同一个表格单元格中显示此图像。

我从以下开始：

  1. 使用文件上传创建表单并将显示设置为无。
  2. 向表格单元格添加单击事件处理程序，并将其设置为处理隐藏表单的文件上载
  3. 编写脚本以将图像保存在文件系统上，并在数据库中写入指向它的链接
  4. 拥有服务器上图像的脚本返回链接
  5. 在表格单元格中用图像写出图像元素

答案 1 :(得分：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>
相关问题
最新问题