Php 图像上载脚本仅适用于最新版本<；李></李>；保存在数据库中

下面是上载图像并将其保存到数据库的脚本

在网站的一个页面上，有一个表格，在每个

中，有一个上载图标，用户可以在其中添加一幅图像

问题是图像上载仅适用于表上“最高”的空

。

这里，“最高”是指数据库中保存的最新的

（表格按时间描述排序）

例如，如果我想将一个图像上传到页面上的随机

，一旦我选择了一个图像，什么都不会发生。但是如果我选择“最高”的空（empty=没有以DB保存的图像）

/code>，它就像一个符咒

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>

<?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");

}
?>

您的html表单似乎有

在HTML中，您有：

<form id="upload_icon" action="upload_extra.php" method="POST" 
  enctype="multipart/form-data">

根据一些规范（，），在多个元素上不应该有相同的ID。因此，当您使用迭代时，避免打印ID而不在其上附加唯一的内容，例如：

<form id="upload_icon<?php print $recipe_id; ?>"
  action="upload_extra.php" method="POST" enctype="multipart/form-data">

启动
$location
变量。
在JavaScript中，通过按ID查找元素来提交表单，就像在HTML代码中ID重复一样（不是标准方法，ID不能重复，但类可以重复），因此浏览器将始终只提交最后一个（最高的）表单，这就是为什么在将图像添加到最高行时，它会工作，而在两者之间则不会工作

请检查此代码

 <script>
$(document).ready(function() 
{
    id = '';
   $('.upload_icon').click(function(){
        id = $(this).attr('id');
       $(this).parent().find('#file'+id).click();
   });

    $(".upload").change(function () {
        $('#upload_icon'+id).submit();
    });
});
</script>
<style>
.upload_icon {
    cursor:pointer;
}
</style>
<ul>
<?php for($recipe_id=1;$recipe_id<10;$recipe_id++): ?>
<li id="entry<?php echo $recipe_id ?>">
    <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
        <form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_icon<?php echo $recipe_id; ?>">
            <input class="upload" id="file<?php echo $recipe_id; ?>" type="file" name="image" style="display:none"/>
            <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>" />
            <img class="upload_icon" src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-036_cloud_upload-128.png" id="<?php echo $recipe_id; ?>">
        </form>
    </div>
</li>
<?php endfor; ?>
</li>


$（文档）.ready（函数（）
{
id=“”；
$（'.upload_图标'）。单击（函数（）{
id=$（this.attr（'id'）；
$（this.parent（）.find（“#file”+id）。单击（）；
});
$（“.upload”）.change（函数（）{
$（'#上传图标'+id）.submit（）；
});
});
.upload_图标{
光标：指针；
}

你的问题有很多很多问题。首先，您发布的HTML是无效的。我怀疑您的Javascript代码在这种无效HTML中存在问题。但是，以下代码没有（对于您的HTML代码，为了演示目的复制了一次）：


您只需要将正确的侦听器分配给正确的元素，正如您所看到的，我不使用任何ID值，因为它们是重复的

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




我希望这有助于您重新开始测试，这样您就可以继续验证HTML并进行一点清理。
只需更改此部分：

document.getElementById("file").onchange = function() {
   document.getElementById("upload_icon").submit();
}

与：

$("#file").change(function(){$(this).parents("form").get(0).submit();})

getElementById（“文件”）
=>如果它们都有该
id
。。。想象一下哪个元素是绑定的。首选常规选择器，如jQuery的
input.upload[type=file]
，以及相对提交（
this.form.submit（）
）谢谢！我已经试过了，但是现在我不能再选择图片了，你介意添加一个答案并给我看一个例子吗？放一些东西，我明天会看看我能做些什么。我看不出有任何努力来实现我的建议。你是想让我给你代码，而不是帮助你自己创建代码吗？这不是“让我们找个帮手帮我写代码”的网站。我会帮你写一封，但是，如果我需要为你写一封，你得付钱给我（不，我上午没空）。祝你好运找到其他笨蛋，我不想再把自己的时间花在一个只想让别人做他们被雇来做的工作的人身上。谢谢！我复制/粘贴代码时出错了。在源文件中，我有name属性。所以我猜这个错误不是因为这个。不过，我会在我的问题中加上它，谢谢你的回答，谢谢！如果我按原样使用Javascript，当我单击上载图标时，什么也不会发生：浏览文件的弹出窗口不再显示。我之前使用的两行Javascript允许一次点击浏览和上传。有没有办法解决这个问题？我从来没说过你可以复制/粘贴我的Javascript。我清楚地提到，您需要“在页面加载后调用此函数”，这将解释为Firefox需要更多帮助来处理无效的HTML，因此如果您想测试它，需要在CSS中添加一点内容：-注意，没什么复杂的。改成jQuery并不合适solution@scrowler为什么不呢？他已经在Javascript示例中使用了它。
//get image attributes

 <script>
$(document).ready(function() 
{
    id = '';
   $('.upload_icon').click(function(){
        id = $(this).attr('id');
       $(this).parent().find('#file'+id).click();
   });

    $(".upload").change(function () {
        $('#upload_icon'+id).submit();
    });
});
</script>
<style>
.upload_icon {
    cursor:pointer;
}
</style>
<ul>
<?php for($recipe_id=1;$recipe_id<10;$recipe_id++): ?>
<li id="entry<?php echo $recipe_id ?>">
    <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
        <form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_icon<?php echo $recipe_id; ?>">
            <input class="upload" id="file<?php echo $recipe_id; ?>" type="file" name="image" style="display:none"/>
            <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>" />
            <img class="upload_icon" src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-036_cloud_upload-128.png" id="<?php echo $recipe_id; ?>">
        </form>
    </div>
</li>
<?php endfor; ?>
</li>

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);
});

document.getElementById("file").onchange = function() {
   document.getElementById("upload_icon").submit();
}

$("#file").change(function(){$(this).parents("form").get(0).submit();})