Fatal编程技术网
  • javascript/
  • 如何使用javaScript上传图像文件

如何使用javaScript上传图像文件

javascript

如何使用javaScript上传图像文件,javascript,Javascript,我有一个表，允许我对位于不同页面上的另一个表进行更改（例如：添加产品描述、输入产品ID和其他值）。现在，我可以编辑所有的内容，如项目描述和价格，但我也希望能够上传图像到该表以及 现在我假设我只是在管理页面的表上做了一些表单，其中有一个“上传图像”按钮，允许管理员将图像上传到表中。然而，我不完全确定如何使它，使图像得到转移到表中的特别优惠页 我将非常感谢在这方面的一些帮助，即使这只是朝着正确的方向推动 我还应该注意，我希望图像进入一个特定的列，并且能够进入该列中的不同行。我看过不同的JavaScr

我有一个表，允许我对位于不同页面上的另一个表进行更改（例如：添加产品描述、输入产品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>


管理
#我的桌子{
大纲：无；
清除：左；
显示：内联块；
}
tr，td，th{
边界塌陷：塌陷；
边框：1px实心；
边界半径：4px；
填充：2px；
}
th{
背景色：#FABA48；
}
运输署{
高度：22px；
最小宽度：125px；
背景色：#FAD884；
}
导航[数据类型=“表格工具”]ul li{
显示：内联块；
列表样式类型：无；
右边距：10px；
背景颜色：暗金色；
边界半径：5px；
填充物：5px；
}
#删除按钮td{
背景颜色：暗金色；
}
导航[数据类型=“表格工具”]ul li a，#删除按钮a{
字体大小：粗体；
文字装饰：无；
颜色：#000；
不透明度：0.6；
}
导航[数据类型=“表格工具”]ul li:hover>a，#删除按钮a:hover{
颜色：#FFF；
}
#删除按钮{
显示：内联块；
清楚:对,；
文本对齐：居中；
}
"http://jquery.com"

$（document）.ready（function（）{$（“#deleteButtons”）.css（“display”，“none”）；var getTable=function（）{$（“#myTable”）.html（“”；$.get（“myTable.html”，function（callbackup_data）{var table=callbackup_data；document.getElementById（“myTable”）.innerHTML=table}；getTable（）；$（“#addRow”）。单击（函数（事件）{event.prevent.preventDefault（）；colNumber=$（$（“#myTable tr[0]）.children（“td”）.length；var tr=document.createElement（“tr”）；var td=“”；for（var i=0；i老实说，您的问题不是很清楚。我假设您希望用户能够单击表格单元格，上载图像并在同一表格单元格中显示此图像

我将从以下内容开始：


  • 创建带有文件上载的表单，并将“显示”设置为“无”
    • 

  • 将click事件处理程序添加到表单元格，并将其设置为处理隐藏表单的文件上载
    • 

  • 编写脚本将映像保存在文件系统上，并在数据库中写入指向该映像的链接
    • 

  • 在服务器上设置映像的脚本返回链接
    • 

  • 在表格单元格中写出一个包含图像的图像元素
    • 
例如：
    

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

    

    
上传测试
产品ID
    

    


    
产品ID
图画
项目说明
是
现在
12345
智者前庭、非智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭、智者前庭。
54321
前庭，无前庭，无前庭，辅助前庭，无前庭。

    请阅读有关如何正确提问StackOverflow的内容。@Diodeus我希望我现在已将其本地化程度降低到“真实”的程度"问题。你需要使用javascript吗？或者普通html可以工作吗？我想普通html可以工作，问题是当图片通过管理页面上传时，它也需要显示在特价页面上，我不确定html是否可以做到这一点，但如果可以的话，那就太好了。更好地解释了如何上传图片和检测fini上传图片文件。我会尽量让它更清晰一些。管理员页面上的表格允许管理员对显示在特别优惠页面上的表格进行更改。我试图做的是获取它，以便（从管理员页面）用户可以更改产品描述（我已经在工作）并上传该产品的图像。好的，很好。我想前面提到的步骤也可以。感谢代码，我注意到您有这个位“//然后将$final_name（图像路径）保存到数据库”如果我没有网站的数据库，它还能工作吗？这听起来可能很愚蠢，但我应该把这些代码放在哪里？我应该把它放在表中还是放在javascript的顶部？满足您的需要（添加产品描述、输入产品ID、图像和其他），要保存、编辑和删除内容，使用表内容创建数据库是最好的选择。请将php代码放在页面顶部。如果您希望将表单放在表中，则无法将其保留在网站上或保存在服务器上？我只是先检查所有选项

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