如何使网站图像可编辑

时间:2018-04-27 13:29:13

标签: javascript image mysqli

我有一个拥有大量图片的小型网站。问题是所有图像都随时间而变化。例如,我有一份报价图片。此图像可能会更改为另一个图像,因此我需要更改图像。

我想将所有图像存储在数据库中的目录和图像路径中。我将在每个图像旁边添加一个编辑按钮,当用户点击它时,我想传递一些参数,如src来运行,并具有允许我将网站上的任何图像更改为任何内容的功能。

我想我有办法,但我需要帮助启动。我创建了图像表并添加了图像。我怎样才能编写一个基本上允许我将任何网站图像从数据库更改为不同图像的功能。

编辑1 这是我做的一些代码。基本上,当用户单击编辑图像时,模式打开,其中包含来自数据库的所有图像。当用户选择图像时,它将取代' src'点击图片的属性。但是当我刷新页面时,图像会回到原始图像。

HTML

<div class="container">
 <img alt="Start timer" id="idimg2" class="classimg" src="css/icons/timer-stop.png">
  <div class="overlay"> 
        <button type="button" class="btn btn-warning img-upload" data-toggle="modal" data-target="#modal" imgid= "idimg2" imgclass="classimg" >
  Edit
</button></div>
</div>




<!--  Timer reason modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> 
        <h3 class="modal-title" id="lineModalLabel">A&G Signs - SCS</h3>
        <div class="text-center">
                    <h4>Select Image</h4>
                     <form id="timer-reason">
                        <div class="row">
                                <div class="col-md-12">
                                    <?php
                                        while ($row = mysqli_fetch_assoc($images)) {
                                    ?>
                                            <img src="<?php echo $row['imagedir_img']; echo $row['image_img']; ?>" style="width:20%;" class="img-gallary">

                                    <?php 
                                     }
                                    ?>

                                 </div>
                                </div>
        </div>
      </div>
                <div class="modal-footer">
                    <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-success" id="submit-timer-reason" role="button" data-dismiss="modal">Save</button>
                        </div>
                    </div>
                </div>
      </form>
    </div>
  </div>
</div>

的JavaScript

$( document ).ready(function() {
$(".img-upload").click(function(){
     imdid = $(this).attr("imgid");
});

$(".img-gallary").click(function(){
    var imgsrc = $(this).attr("src");
    $("#"+ imdid).attr("src",imgsrc)

   });  

  });

非常感谢。

0 个答案:

没有答案