Upload Immagine

**pippuccio76** · 31-03-2015, 21:29

Vorrei fare l'upload di un immagine e relativa eliminazione con ajax :

il tutto è caricato qui :

http://lemuria.altervista.org/UploadImg/

Il tutto funziona solo dopo il refresh , perchè ?

Riesco a gestire il pulsante invia ( e sfoglia) ed elimina con php , cioè se c'è l'immagine appare elimina se non c'è gli altri 2 , ma funziona solo con refresh vorrei farlo con javascript inserendo per l'eliminazione dopo onsubmit :

// var eliminadiv = document.getElementById("uploadFormLayer");
// eliminadiv.removeChild(unDiv.firstChild);

ma non funziona + l'upload .

ps vorrei caricare index php ma non me lo fa caricare...

**pippuccio76** · 01-04-2015, 18:51

Codice PHP:


<div class="bgColor">        <form id="uploadForm" action="ajax/upload_img.php" method="post">        <div id="targetLayer" class='riquadro'>        <?php if (!$esisteprofile): ?>            No Image        <?php else: ?>            <img src="img/users/<?= $sessid ?>/profile.png" class='imgprofile' width="150px" height="150px" / >        <?php endif ?>
        </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"><h2>LA TUA CASA, LE TUE CREAZIONI, I TUOI OSPITI</h2>Qui puoi inserire le immagini di casa tua, i tuoi piatti e i tuoi ospiti.Tante belle immagini miglioreranno la tua presentazione!<p></p>
        <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>
                <div class="bgColor">        Foto 3 :        <form id="uploadForm3 " action="ajax/upload_img3.php" method="post">        <div id="targetLayer3 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer3 "  >    
        <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="deleteprofile3 "><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) {    $("#uploadForm3").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img3.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer3 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>
                <div class="bgColor">        Foto 4 :        <form id="uploadForm4 " action="ajax/upload_img4.php" method="post">        <div id="targetLayer4 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer4 "  >    
        <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="deleteprofile4 "><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) {    $("#uploadForm4").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img4.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer4 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>
                <div class="bgColor">        Foto 5 :        <form id="uploadForm5 " action="ajax/upload_img5.php" method="post">        <div id="targetLayer5 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer5 "  >    
        <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="deleteprofile5 "><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) {    $("#uploadForm5").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img5.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer5 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>
                <div class="bgColor">        Foto 6 :        <form id="uploadForm6 " action="ajax/upload_img6.php" method="post">        <div id="targetLayer6 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer6 "  >    
        <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="deleteprofile6 "><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) {    $("#uploadForm6").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img6.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer6 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>
                <div class="bgColor">        Foto 7 :        <form id="uploadForm7 " action="ajax/upload_img7.php" method="post">        <div id="targetLayer7 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer7 "  >    
        <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="deleteprofile7 "><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) {    $("#uploadForm7").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img7.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer7 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>
                <div class="bgColor">        Foto 8 :        <form id="uploadForm8 " action="ajax/upload_img8.php" method="post">        <div id="targetLayer8 " class='riquadro'>                    No Image                </div>                <div id="uploadFormLayer8 "  >    
        <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="deleteprofile8 "><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) {    $("#uploadForm8").on('submit',(function(e) {        e.preventDefault();                $.ajax({            url: "ajax/upload_img8.php",            type: "POST",            data:  new FormData(this),            contentType: false,            cache: false,            processData:false,            success: function(data)            {            $("#targetLayer8 ").html(data);                        },              error: function()             {            }                    });            }));});

</script>    


           </div>

**pippuccio76** · 01-04-2015, 22:27

Scusate per il post precedente ma non mi fqaceva inserire il codice, questo è una parte del codice ma dei due solo il primo funziona mentre l'altro mi manda alla pagina invece di mostrare l'immagine perchè?

codice:

<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() 
            {
            }             
       });




    }));


    $("#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>

Discussione: Upload Immagine

Strumenti discussione

Ricerca discussione

Visualizza

Upload Immagine

Permessi di invio