php - 图片上传脚本仅适用于保存在数据库中的最新 <li></li>

Question

下面是一个上传图片并将它们保存到数据库的脚本。

在网站的一个页面上，有一个表格，每个表格里面都有 <li></li> ，有一个上传图标，用户可以在其中添加一张图片。

问题是图像上传仅适用于“最高”空 <li>在 table 上。

在这里，“最高”表示最新的 <li>保存在数据库中(表按 TIME DESC 排序)。

例如，如果我想将图像上传到随机 <li></li>在页面上，一旦我选择了一张图片，什么也没有发生。但是如果我选择“最高”空(空 = 数据库中没有保存图像)<li></li> ，它就像一个魅力。

HTML:

<li id="entry<?php echo $recipe_id ?>">
  <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
    <form id="upload_icon" action="upload_extra.php" method="POST" 
     enctype="multipart/form-data"> 
       <input  class="upload" id="file" type="file" style="display:none" />   
       <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>
       <img class="upload_icon" src="/upload_icon.png">
    </form>
  </div>
</li>

JAVASCRIPT(选择一张图片后立即触发上传):

<script>
   $('.upload_icon').click(function(){
       $(this).parent().find('.upload').click();
   });

    document.getElementById("file").onchange = function() {
    document.getElementById("upload_icon").submit();
}
</script>

PHP:

<?php 
include "includes/connnect.php";
$id = $_SESSION['id'];
$recipe_id = mysql_real_escape_string($_POST['recipe_id']);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$recipe_id= $_POST['recipe_id'];

//get image attributes

$add = query("UPDATE cookbook SET recipe_pic = '".$location."' WHERE recipe_id =  
'$recipe_id'");

header(Location:"home.php");

}
?>

这是怎么回事？

Answer 1

你的问题有很多很多问题。首先，您发布的 HTML 无效。我怀疑您的 Javascript 代码存在此类无效 HTML 的问题。然而，下面的代码并没有(为了演示目的，你的 HTML 代码重复了一次):

NodeList.prototype.forEach = Array.prototype.forEach;
document.querySelectorAll('input[type="file"]').forEach(function (file) {
    var click = function() {
        file.click();
    };
    var change = function() {
        console.log('change:', file.value);
    };
    file.form.querySelector('img').addEventListener('click', click);
    file.addEventListener('change', change);
});

http://jsfiddle.net/eBLL5/

您只需将正确的监听器分配给正确的元素，如您所见，我没有使用任何 ID 值，因为它们是重复的。

如果您认为这不是一个论点，我也可以使用重复的 ID，这在相关答案中得到了证明:

• remove text from multiple spans having same id

我希望这能帮助您重新站稳脚跟，以便您可以继续验证 HTML 并稍微清理一下。