上传前无法显示图片

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。

上传前无法显示图片

Can't show an image before uploading

javascript

php

jquery

image-uploading

preview