Upload immagine con nome random

24-06-2017, 12.12.54

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

**mzanella** · 24-06-2017, 23.39.56

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).

25-06-2017, 09.25.05

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.

25-06-2017, 10.43.42

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?

**mzanella** · 25-06-2017, 13.00.26

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.

25-06-2017, 14.38.56

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...

**mzanella** · 25-06-2017, 18.45.52

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

25-06-2017, 20.42.53

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 :)

25-06-2017, 20.44.19

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

Discussione: Upload immagine con nome random

LinkBack

Strumenti discussione

Display

Upload immagine con nome random

Regole di scrittura