DOMANDA Effettuare update immagine già inserita alla pressione di un "button" (HTML/CSS/JS/PHP)

[Gabreturns]

Buongiorno a tutti,

sto creando una piccola pagina per l'inserimento di alcune immagini, ho impostato un form attraverso cui poter caricare un'immagine che viene rinominata, salvata in una cartella, ed il cui percorso viene inserito nel db .

Adesso vorrei far in modo che, premendo un bottone "Modifica", che si trova all'interno di una tabella, venga direttamente aperta la finestra per scegliere una nuova immagine, e, se possibile, vorrei anche fare in modo che:

• una volta caricata la nuova immagine, essa venga rinominata come la precedente.
• la scritta all'interno del bottone "Modifica" diventi "Conferma" o qualcosa di simile, evitando di dover mantenere due tasti separati per l'upload ed il submit.

Ho fatto diversi tentativi ma non ci sono ancora riuscito. Avreste dei consigli?

Questo è il codice html per l'upload:

<form action="upload.php" style="text-align: center"method="post" enctype="multipart/form-data">
                    <label for="upload-image" class ="label_upload" id="label-interest1" >
                      <div class="zoom" style="width:150px;height:150px; display: inline-block" >
                        <img id="thumbnail" src="images/cloud.png"valt=""/>
                        </div>
                          </label>

                    <input type="file" id="upload-image" name="immagine" onchange="myFunction()">
                      <input type="submit" onclick="addFunction()" name="add" id="btn-upload" value="Aggiungi" class="button">

                    </form>


<script type="text/javascript">
              function myFunction(){
                var photo = 'images/uploaded.png';
                $('#label-interest1 img').attr('src', photo);
              }

              </script>



<script type="text/javascript">
    function addFunction() {
      var extension = $('#upload-image').val().split('.').pop().toLowerCase();
        if(jQuery.inArray(extension, ['gif','png','jpg', 'jpeg'])== -1){
            alert("Per favore, inserisci un'immagine!");
          }else{
            alert("Immagine caricata correttamente");
          }
      }
  </script>

Questo invece è il codice che dovrei modificare:

<td id="tasti">
              <a  class ="button" id="upd" href="edit.php?id=<?php echo $data['id']; ?>" onclick="">Modifica</a>
              <a  class ="button" id ="del" onclick ="return confirm('Sei sicuro di voler cancellare l\'immagine?')" href="delete.php?id=<?php echo $data['id']; ?>">Elimina</a>
        </td>

Il delete funziona alla perfezione, attraverso il file edit.php, al momento, riesco soltanto a cancellare correttamente l'immagine precedentemente inserita, ma non capisco come dovrei comportarmi dopo. Grazie per l'aiuto.