如何使div可编辑为textarea并上传/删除现有图像 [英] How to make the div editable to textarea and upload/delete existing images

问题描述

我有一个网站，用户可以在其中上传图像，名称和描述.我将其保存在mysql中，并获取该信息以显示在我的网站上.这就是我下面的代码所做的，让用户输入这些信息(图像和文本)，并在他们单击提交"按钮时将其显示在网站上.

I have a website where user can upload images, name and description. I am saving it in mysql and fetching that information to show on my website. That's what my below code does, let the user enter those information (image and text) and show it on the website when they click submit button.

我的问题是，当用户单击编辑"按钮时，如何使div(显示图像，名称和说明)可编辑(因此将同一div更改为textarea或可编辑的内容)，并且图像应带有十字单击编辑"按钮时在图像附近标记，以便用户可以删除它并单击上传"按钮以上传更多图像.

My question is how can I make the div (that shows images, name and desc) to editable when user clicks the edit button (so change that same div to textarea or something that is editable) and for images should have an cross mark near the image when clicked on edit button, so user can delete it and upload button to upload more images.

我做了什么:我尝试使用JavaScript来获取div的值，并使用该值将其更改为textarea，但它表示 grid div的值未定义.

What I have done: I try to use javascript to get the value of div and use that to change it to textarea, but it says the value is undefined for the grid div.

因此，如上所述，我如何使div可编辑，因为到目前为止我还没有尝试完成，所以有没有更好的方法可以使div可编辑，就像我上面解释的一样，因此用户可以编辑文本并上传或删除图片?

So, how can I make my div editable as explained above, as what I have try so far is not complete, so is there any better way to make the div editable same way I explained above so user can edit text and upload or delete images?

我的代码:

 <?php
    
    require "database.php"; // connecting to database
    session_start();
    
    global $username;
    $username = $_SESSION['userUsername'].$_SESSION['userId']; //fetching the username
  
    
    $image = "userPos/$username"; //fetching image posted by specific user
    
    function listFolderFiles($dir, $username){
    
   <!-- The div my_class is getting the images from local storage
         that was initially uploaded by user in the website
 (and we stored it in the local storage) to display them on the website -->

    echo '<div class="my_class">';  
        $ffs = scandir($dir);
    
        unset($ffs[array_search('.', $ffs, true)]);
        unset($ffs[array_search('..', $ffs, true)]);
        // prevent empty ordered elements
        if (count($ffs) < 1)
            return;
   
        foreach($ffs as $ff){
      
        $s = "'<li>'.$ff";
         $saving = "$dir/$ff";
          $string = "$saving";
          global $string_arr;
          $string_arr = (explode("/",$string));
          $sav;
          $sav =  '<li>'.$ff;
          global $sa;
          $sa = "$ff";
          
          echo '<div class="imagess">';
    
       
           if(is_file($saving)) {
            
            echo '
     <div class="images">
          <img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive"  />
          </div>
            
            ' ;
           }
           echo `</div>`;
    
        
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff, $username);
        
        }
        echo `</div>`;
       
    
     
        require "database.php";
    
        <!--Here we are fetching the name and description
         that was entered by user on the website
          and displaying them on the website now-->

        $username = $_SESSION['userUsername'].$_SESSION['userId'];
        
        $sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
        
        $result = mysqli_query($conn, $sql);
        $resultCheck = mysqli_num_rows($result);
        
     
        if($resultCheck > 0) {
            echo '</br>';
        
            while($row = mysqli_fetch_assoc($result) ) {
               //name and desc
                echo '<div class="grid">' . '<h2>' .  $row["_name"] . '</h2>' . '</div>';
               
                echo '<div class="grid2">' . '<p>' .  $row["_desc"] . '</p>' . '</div>';
          
              
            }
    
    <!--Here I am trying when user click on edit button it should
     change that div to editable textarea so user can edit
      and save it or delete the whole div-->
   
     echo '<button onClick="editName()" class="btn btn-info"> 
      Edit</button>';
        echo '<a href="deleteUserInfo.php?edit= '. 
       $row["id"].'"class="btn btn-danger ">Delete</a>';
    
           
        }
        echo '</div>';
    }
    listFolderFiles($image, $username);
    
   
    ?>
      <script>



function editName() {
    console.log("calling");
    var divName = $("grid").html(); 
    console.log(divName); //value is undefined here
    var editableName = $("<textarea />");
    editableName.val(divName);
    $("grid").replaceWith(editableName);
    editableName.focus();
    editableName.blur(saveName);

}

function saveName() {
    var htmlName = $(editableName).html();
    var viewableText = $("<div>");
    viewableText.html(htmlName);
    $(editableName).replaceWith(viewableText);

    $(viewableText).click(editName);
}

</script>  
    
    
    </body>
    </html>

推荐答案

当用户单击编辑"按钮时，将目标元素上的 contenteditable 属性设置为true并将焦点设置到该元素上.

When the user clicks the edit button, set the contenteditable attribute to true on the target element and set the focus to that element.

function editName() {
    $("grid").attr("contenteditable", true);
    $("grid").focus();
    $("grid").blur(saveName);
}

这篇关于如何使div可编辑为textarea并上传/删除现有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！