Upload immagini

pippuccio76

Utente Attivo
21 Lug 2013
27
1
3
Salve questo il sorgentedella mia pagina:
Codice:
<div class="bgColor">
		<form id="uploadForm" action="ajax/upload_img.php" method="post">
		<div id="targetLayer" class='riquadro'>
					<img src="img/users/90/profile.png" class='imgprofile' width="150px" height="150px" / >
		
		</div>
		
		<div id="uploadFormLayer" >
	

		<label>Upload Image File:</label><br/>
		<input name="userImage" type="file" class="inputFile" />
		<input type="submit" value="Invia" class="btnSubmit" />

		
		</div>
		</form>
		<div id='buttonelimina'>
		
			<button id="deleteprofile"><a onclick="return confirm('Attenzione: Sei sicuro di voler cancellare l\'immagine?');" href='ajax/delete_img.php'>Elimina Immagine</a> </button>
		
		</div>
		
		</div>
		
      
		
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		
		$.ajax({
        	url: "ajax/upload_img.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$("#targetLayer").html(data);
            
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});


</script>





<div class="fotohost">


		<div class="testopiccolo">Max 8 foto, Max 4Mb ciascuna</div>

		
		<div class="bgColor">
		Foto 1 :
		<form id="uploadForm1 " action="ajax/upload_img1.php" method="post">
		<div id="targetLayer1 " class='riquadro'>
					No Image
		
		</div>
		
		<div id="uploadFormLayer1 "  >
	

		<label>Upload Image File:</label><br/>
		<input name="userImage" type="file" class="inputFile" />
		<input type="submit" value="Invia" class="btnSubmit" />

		
		</div>
		</form>
		<div id='buttonelimina'>
		
			<button id="deleteprofile1 "><a onclick="return confirm('Attenzione: Sei sicuro di voler cancellare l\'immagine?');" href='ajax/delete_imgnum.php?num=1'>Elimina Immagine</a> </button>
		
		</div>
		
		</div>
		
      
		


<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm1").on('submit',(function(e) {
		e.preventDefault();
		
		$.ajax({
        	url: "ajax/upload_img1.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$("#targetLayer1 ").html(data);
            
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
		
	}));
});


</script>

		
		<div class="bgColor">
		Foto 2 :
		<form id="uploadForm2 " action="ajax/upload_img2.php" method="post">
		<div id="targetLayer2 " class='riquadro'>
					No Image
		
		</div>
		
		<div id="uploadFormLayer2 "  >
	

		<label>Upload Image File:</label><br/>
		<input name="userImage" type="file" class="inputFile" />
		<input type="submit" value="Invia" class="btnSubmit" />

		
		</div>
		</form>
		<div id='buttonelimina'>
		
			<button id="deleteprofile2 "><a onclick="return confirm('Attenzione: Sei sicuro di voler cancellare l\'immagine?');" href='ajax/delete_imgnum.php?num=1'>Elimina Immagine</a> </button>
		
		</div>
		
		</div>
		
      
		


<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm2").on('submit',(function(e) {
		e.preventDefault();
		
		$.ajax({
        	url: "ajax/upload_img2.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$("#targetLayer2 ").html(data);
            
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
		
	}));
});


</script>

uploadform e il relativo script sono scritti manualmente ,

uploadform1 e uploadform2 sono scritti con un ciclo php , perchè iluploadform funziona mentre se invio una foto con questi 2 invece di ricaricare il riquadro con l'immagine vengo rispedito all'url ?
 

Discussioni simili