Question

以下是上传图片的脚本并将其保存到数据库中。

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

问题是图片上传仅适用于桌面上“最高”的空<li>。

此处，“highest”表示保存在DB中的最新<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并清理一下。

Answer 2

您的html表单似乎有 <input type="hidden" value="<?php echo $recipe_id; ?>"/>

但是，输入字段名称属性不存在，因此后期数据流将不具有$_POST["recipe_id"]字段的定义。未定义的值很可能被您的脚本解释为0，因此只有顶部或＆＃34;最高＆＃34; li图像已更新。

如果改变输入字段：

<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>

你可能会有更好的结果......

Answer 3

只需更改此部分：

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

用：

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

Answer 4

在您的HTML中，您有：

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

然后你的Javascript提到：

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

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

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

您的Javascript可以变成以下内容。（请注意，您需要在加载页面后调用此函数）

function afterPageLoad() {
  var buttons = document.getElementsByClassName("upload");
  for (i = 0; i < buttons.length; i++) {
    buttons[i].onchange = function() {
      this.form.submit();
    }
  }
}

现在，如果您的PHP代码已停止工作，我们还需要在您通过编写省略的部分看到

//get image attributes

启动$location变量的地方。

Answer 5

在JavaScript中提供了通过ID查找元素来提交表单，如在HTML代码中ID重复（不是标准方法，IDS不能重复，但类可以），因此浏览器将始终提交最后一个（最高的形式，这就是为什么在将图像添加到最高行时它的工作原理和它之间的原因。

请检查此代码

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

在我提供的HTMl代码中，每个表单都有不同的ID（使用$ recipe_id作为后缀），当上传图标上的点击事件被触发时，它会检查哪个上传图标被其属性Id点击，然后是通过Id查找元素来更改相应的输入类型文件值（此处也使用与后缀相同的$ recipe_id）。在输入类型更改事件中，也使用相同的逻辑来触发相应的表单。

图片上传脚本仅适用于保存在DB中的最新<li> </li>

5 个答案: