4

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

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

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

这里，“最高”是指<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");

}
?>

这是怎么回事？

4

5 回答 5

4

你的问题有很多很多问题。首先，您发布的 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，这在相关答案中得到了证明：

我希望这可以帮助您重新站稳脚跟，以便您可以继续验证 HTML 并进行一些清理。

于 2013-10-01T10:24:40.397 回答
3

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

但是，输入字段名称属性不存在，因此发布数据流将没有$_POST["recipe_id"]字段定义。您的脚本可能会将未定义的值解释为 0，因此仅更新顶部或“最高”的 li 图像。

如果您这样更改输入字段：

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

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

于 2013-09-24T01:07:52.053 回答
1

只需更改这部分：

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

和 ：

$("#file").change(function(){$(this).parents("form").get(0).submit();})
于 2013-10-01T21:50:31.267 回答
0

在 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 作为后缀）。在输入类型更改事件上，也使用相同的逻辑来触发相应的表单。

于 2013-09-28T10:32:47.727 回答
0

在您的 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。因此，当您使用迭代时，请避免打印 id 而不在其上附加一些独特的东西，例如：

<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变量在哪里启动。

于 2013-09-26T05:41:06.437 回答