javascript - 上传前无法显示图片

Question

这是我的问题，当我尝试将图像更改为第二个数据时，它没有改变，但是当我尝试第一个数据时，它正在改变，我不知道它对第二个数据不起作用的原因。有人可以帮我解决这个问题吗？

这是我的表单，其中包含图像和文件。

更新这是 id 42 的新闻图片，当我更改图像时，图像没有改变，但 id 40 的新闻正在改变。

这是我的整个代码。

  $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id");
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);
  while($row = mysqli_fetch_array($result)){
  ?>
   <tr>
  <td><?php echo $row['news_id']; ?></td>
  <td><?php echo $row['news_title']; ?></td>
  <td><?php echo $row['news_date']; ?></td>
  <td><?php echo $row['news_content']; ?></td>
  <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>"  ></td>
  <td>

  <button class="btn btn-info" data-toggle="modal" data-target="#newsedit<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-edit"></span>  Edit</button>
  <a class='btn btn-danger delete-object' data-toggle="modal" data-target="#newsdelete<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-remove"></span> Delete</a>

  <div class="modal fade" id="newsdelete<?php echo $row['news_id'];?>" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
              <div class="modal-content">
                    <div class="modal-body">
                       Are you sure you want to delete this?
                            </div>
     <div class="modal-footer">
      <a class='btn btn-danger left-margin' href="delete.php?newsid=<?php echo $row['news_id'];?>" >Yes</a>
    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
          </div>
           </div>
          </div>
          </div>

     <div id="newsedit<?php echo $row['news_id'];?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content"> 
                        <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Edit events</h4>
                                  </div>

                                 <div class="modal-body edit-content">
                                    <form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
                                          <div class="form-group">
                                            <label for="title">News Title</label>
                                            <input type="text" name="titles" class="form-control title" id="title" placeholder="News Title" value="<?php echo $row['news_title']; ?>">
                                          </div>

                                          <div class="form-group">
                                             <label for="date">Date</label>
                                             <input type="text" name="dates" class="form-control date" id="date" placeholder="Date" value="<?php echo $row['news_date']; ?>"s>
                                         </div>

                                         <div class="form-group">
                                            <label for="content">News Content</label>
                                            <textarea class="form-control content" name="contents" rows="5" id="content"><?php echo $row['news_content']; ?></textarea>
                                         </div>


                                         <img id="blah" name="newsimages" src="<?php echo $row['news_image']; ?>" width="200px" height="140px"/>
                                            <input id="image" name="image" class="fileupload" type="file" accept="image/*"/>

                                 </div>

                               <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class='btn btn-info left-margin'>Yes</a>
                                  </form>
                            </div>
                              </div>
                        </div>
                   </div>


                </td>
            </tr>
        <?php
        }
        ?>

这是上传前显示图片的js。

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image").change(function(){
        readURL(this);
    });
    </script>

Answer 1

使用这样的东西:

function readURL(input) {
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);

    $(input).siblings('img').attr('src', url);
  }
}

$(".fileupload").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="newsimages" width="200px" height="140px"/>
<input name="image" class="fileupload" type="file" accept="image/*" />

不要在文档中使用重复的id!这会导致未定义的行为，并且通常会导致事情无法按预期发生。最简单的解决方案是删除 PHP while 循环内 HTML 中的任何 id。