Salve questo il sorgentedella mia pagina:
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 ?
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 ?