Upload immagine con nome random

Buongiorno a tutti.
Avrei un problema per quanto riguarda la generazione di nomi random sulle mie immagini.
Il problema è che quando mando in upload una singola immagine mi upoada 3 immagini con nomi diversi e non capisco proprio dove sia il problema.

Codice PHP:

---

if ($_FILES['photo']['size'] != 0){

echo '<script type="text/javascript">alert("ENTRATO:");</script>';

$post_image= $_FILES['photo']['name'];
$newfilename = rand(1,99999) . '.' . end(explode(".",$_FILES["photo"]["name"]));
$location = $_SERVER['DOCUMENT_ROOT'] . "$dir" .$newfilename;
move_uploaded_file($_FILES["photo"]["tmp_name"],$location);


}


---

Qualcuno potrebbe aiutarmi?
Grazie mille:roll:

Il codice di per sè è abbastanza corretto. Se l'immagine viene caricata tre volte, probabilmente è il codice ad essere stato chiamato tre volte. Oppure la procedura di caricamento è stata effettuata più volte (per esempio da uno script JavaScript).

Ciao!
Se noti bene ho messo anche un alert per verificare per l appunto se entrava piu di una volta...invece entra solo 1 volta.
Ho fatto moltissime prove ieri non risolvendo questo problema.

Ok ho trovato il problema:

Codice HTML:

---

//jQuery Ajax to Post form data
                        $.ajax({
                                url : post_url,
                                type: "POST",
                                contentType: false,
                                cache: false,
                                data : form_data
                                processData:false,
                                xhr: function(){
                                        //upload Progress
                                        var xhr = $.ajaxSettings.xhr();
                                        if (xhr.upload) {
                                                xhr.upload.addEventListener('progress', function(event) {
                                                        var percent = 0;
                                                        var position = event.loaded || event.position;
                                                        var total = event.total;
                                                        if (event.lengthComputable) {
                                                                percent = Math.ceil(position / total * 100);
                                                        }
                                                        //update progressbar
                                                        $(progress_bar_id +" .progress-bar").css("width", + percent +"%");
                                                        $(progress_bar_id + " .status").text(percent +"%");
                                                }, true);
                                        }
                                        return xhr;
                                },
                                mimeType:"multipart/form-data"
                        }).done(function(res){ //
                                $(my_form_id)[0].reset(); //reset form
                                $(result_output).html(res); //output response from server
                                submit_btn.val("Upload").prop( "disabled", false); //enable submit button once ajax is done
                        });
                }
        }
       
        $(result_output).html(""); //reset output
        $(error).each(function(i){ //output any error to output element
                $(result_output).append('<div class="error">'+error[i]+"</div>");
        });
               
//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  if (bytes == 0) return '0 Bytes';
  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
});

---

è la funzione ajax per la barra di avanzamento.
Cos'è che devo modificare?

Premesso che dovresti abbandonare l'uso degli alert in favore di strategie di logging/segnalazione errori più appropriate, anche quel codice JavaScript sembra corretto. Probabilmente viene richiamato anch'esso più volte.

dato che questo progress bar è piuttosto complesso da gestire ho deciso di inserire un percentage circle pero non so come gestirlo...
un esempio è questo:
https://github.com/amazingSurge/jquery-asPieProgress
ho provato a modificare il codice in questo modo:

Codice HTML:

---

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jquery-asPieProgress</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="../dist/css/asPieProgress.css">
  <style type="text/css">
    body {
      padding: 40px;
    }
    .pie_progress {
      width: 160px;
      margin: 10px auto;
    }
    @media all and (max-width: 768px) {
      .pie_progress {
        width: 80%;
        max-width: 300px;
      }
    }
  </style>
</head>
<body>
  <form method='post' action='upload-manager.php' enctype='multipart/form-data'>
 <input type='file' name='file' />
 <button>Upload</button>
 </form>
  <div class="pie_progress--slow" role="progressbar">
          <span class="pie_progress__number">0%</span>
        </div>


      </div>
    </section>
  </section>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="../dist/jquery-asPieProgress.js"></script>
  <script>
 
 $(function() {
 $(document).ready(function(){
 var bar = $('.pie_progress--slow')
 var percent = $('.pie_progress__number');
 var status = $('.pie_progress--slow');
 
 $('form').ajaxForm({
 beforeSend: function() {
 status.empty();
 var percentVal = '0%';
 bar.width(percentVal);
 percent.html(percentVal);
 },
 uploadProgress: function(event, position, total, percentComplete) {
 var percentVal = percentComplete + '%';
 percent.html(percentVal);
 bar.width(percentVal);
 },
 complete: function(xhr) {
 status.html(xhr.responseText);
 }
 });
 });
 });
 </script>
 
</body>
</html>

---

ma non funziona e non capisco il motivo...

Questo è collegato al problema di prima? Se sì, come?
Hai un link ad una pagina che mostra il problema?

Praticamente si.
Ho fatto altre prove prima per cercare di capire dove era il problema e giuro il problema sorge proprio da quella funzione ajax...
Cosi ho provato a cercare in internet altri progress bar che non avessero ajax.
Cosi ho trovato questo script: semplice e pulito ma sopratutto facile da modificare.
Il problema è che non so come fare la barra di avanzamento in modo circolare.
Spero che adesso le idee ti siano piu chiare e scusami :)

https://www.mondo-tech.it/upload2.html
Ecco la pagina