Visualizzare div quando le immagini sono state uploadate con successo (Ajax)

Andrea Crocco

Utente Attivo
27 Apr 2016
77
0
6
Buongiorno a tutti!
Quando effetuo l'upload di un'immagine sul mio server, la funzione Ajax dovrebbe visualizzare un div con al suo interno un testo (Immagine uploadata con successo..ecc).
Il problema è che non me lo visualizza e non capisco il motivo.
Il Browser inoltre mi dice questo errore: Uncaught SyntaxError: Unexpected token Y in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.ajax.onload

Ed ecco la funzione Ajax:
Codice:
<script>

    'use strict';

    ;( function ( document, window, index )
    {
        // feature detection for drag&drop upload
        var isAdvancedUpload = function()
            {
                var div = document.createElement( 'div' );
                return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
            }();


        // applying the effect for every form
        var forms = document.querySelectorAll( '.box' );
        Array.prototype.forEach.call( forms, function( form )
        {
            var input         = form.querySelector( 'input[type="file"]' ),
                label         = form.querySelector( 'label' ),
                errorMsg     = form.querySelector( '.box__error span' ),
                restart         = form.querySelectorAll( '.box__restart' ),
                droppedFiles = false,
                showFiles     = function( files )
                {
                    label.textContent = files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
                },
                triggerFormSubmit = function()
                {
                    var event = document.createEvent( 'HTMLEvents' );
                    event.initEvent( 'submit', true, false );
                    form.dispatchEvent( event );
                };

            // letting the server side to know we are going to make an Ajax request
            var ajaxFlag = document.createElement( 'input' );
            ajaxFlag.setAttribute( 'type', 'hidden' );
            ajaxFlag.setAttribute( 'name', 'ajax' );
            ajaxFlag.setAttribute( 'value', 1 );
            form.appendChild( ajaxFlag );

            // automatically submit the form on file select
            input.addEventListener( 'change', function( e )
            {
                showFiles( e.target.files );

                
                triggerFormSubmit();

                
            });

            // drag&drop files if the feature is available
            if( isAdvancedUpload )
            {
                form.classList.add( 'has-advanced-upload' ); // letting the CSS part to know drag&drop is supported by the browser

                [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( function( event )
                {
                    form.addEventListener( event, function( e )
                    {
                        // preventing the unwanted behaviours
                        e.preventDefault();
                        e.stopPropagation();
                    });
                });
                [ 'dragover', 'dragenter' ].forEach( function( event )
                {
                    form.addEventListener( event, function()
                    {
                        form.classList.add( 'is-dragover' );
                    });
                });
                [ 'dragleave', 'dragend', 'drop' ].forEach( function( event )
                {
                    form.addEventListener( event, function()
                    {
                        form.classList.remove( 'is-dragover' );
                    });
                });
                form.addEventListener( 'drop', function( e )
                {
                    droppedFiles = e.dataTransfer.files; // the files that were dropped
                    showFiles( droppedFiles );

                    
                    triggerFormSubmit();

                                    });
            }


            // if the form was submitted
            form.addEventListener( 'submit', function( e )
            {
                // preventing the duplicate submissions if the current one is in progress
                if( form.classList.contains( 'is-uploading' ) ) return false;

                form.classList.add( 'is-uploading' );
                form.classList.remove( 'is-error' );

                if( isAdvancedUpload ) // ajax file upload for modern browsers
                {
                    e.preventDefault();

                    // gathering the form data
                    var ajaxData = new FormData( form );
                    if( droppedFiles )
                    {
                        Array.prototype.forEach.call( droppedFiles, function( file )
                        {
                            ajaxData.append( input.getAttribute( 'name' ), file );
                        });
                    }

                    // ajax request
                    var ajax = new XMLHttpRequest();
                    ajax.open( form.getAttribute( 'method' ), form.getAttribute( 'action' ), true );

                    ajax.onload = function()
                    {
                        form.classList.remove( 'is-uploading' );
                        if( ajax.status >= 200 && ajax.status < 400 )
                        {
                            var data = JSON.parse( ajax.responseText );
                            form.classList.add( data.success == true ? 'is-success' : 'is-error' );
                            if( !data.success ) errorMsg.textContent = data.error;
                        }
                        else alert( 'Errore interno. Per piacere contatta il webmaster nell\'apposito form presente nel sito!' );
                    };

                    ajax.onerror = function()
                    {
                        form.classList.remove( 'is-uploading' );
                        alert( 'Ops qualcosa è andato storto. Riprova' );
                    };

                    ajax.send( ajaxData );
                }
                else // fallback Ajax solution upload for older browsers
                {
                    var iframeName    = 'uploadiframe' + new Date().getTime(),
                        iframe        = document.createElement( 'iframe' );

                        $iframe        = $( '<iframe name="' + iframeName + '" style="display: none;"></iframe>' );

                    iframe.setAttribute( 'name', iframeName );
                    iframe.style.display = 'none';

                    document.body.appendChild( iframe );
                    form.setAttribute( 'target', iframeName );

                    iframe.addEventListener( 'load', function()
                    {
                        var data = JSON.parse( iframe.contentDocument.body.innerHTML );
                        form.classList.remove( 'is-uploading' )
                        form.classList.add( data.success == true ? 'is-success' : 'is-error' )
                        form.removeAttribute( 'target' );
                        if( !data.success ) errorMsg.textContent = data.error;
                        iframe.parentNode.removeChild( iframe );
                    });
                }
            });


            // restart the form if has a state of error/success
            Array.prototype.forEach.call( restart, function( entry )
            {
                entry.addEventListener( 'click', function( e )
                {
                    e.preventDefault();
                    form.classList.remove( 'is-error', 'is-success' );
                    input.click();
                });
            });

            // Firefox focus bug fix for file input
            input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
            input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });

        });
    }( document, window, 0 ));
</script>

Premetto che non sono un esperto di Ajax...mi potete dire cosa c'è di sbagliato?
Grazie Mille!
icon_smile.gif
 
Discussioni simili
Autore Titolo Forum Risposte Data
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
S [javascript] visualizzare/nascondere div Javascript 3
felino Visualizzare degli input dinamicamente dentro un div jQuery 1
K Visualizzare sito all'interno di un Div HTML e CSS 5
M visualizzare ip cam in windows IP Cam e Videosorveglianza 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
napuleone visualizzare il codice senza usare gli & HTML e CSS 0
Y Come caricare e visualizzare un'immagine PHP 0
M Visualizzare file PDF con link preso dal DB PHP 0
Alex_70 Visualizzare 2 bandiere PHP 6
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
L Visualizzare tabella all'interno finestra modal PHP 4
P Visual Studio VB.NET Visualizzare un messaggio alla scadenza. .NET Framework 0
J [PHP] Visualizzare risultato query stessa pagina PHP 3
B visualizzare una sola riga Database 3
Alex_70 [PHP] Visualizzare foto tramite select PHP 0
K [ASP] Visualizzare nome del file selezionato Classic ASP 3
M [PHP] Visualizzare un array partendo dal numero 1 e non 0 PHP 5
L [PHP] Visualizzare utente dopo login PHP 0
L [PHP] Visualizzare se una pagina è pingata PHP 1
M [PHP] Visualizzare nell'alert il calcolo PHP 4
D [WordPress] come fare per estrarre dati da un db MySQL tramite una form e visualizzare il risultato WordPress 0
L come visualizzare array di oggetti php PHP 9
S [PHP] visualizzare commento su un prodotto precedentemente selezionato PHP 2
W [PHP] Visualizzare errori su Statements in MySQLi PHP 3
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
W [Javascript] Visualizzare l'href di un link nascosto Javascript 0
L [HTML] Problemi a visualizzare le modifiche eseguite alle pagine del sito. HTML e CSS 2
G [HTML] Visualizzare iframe in un blog non funziona sempre xchė? HTML e CSS 3
tritabit [HTML] Visualizzare stelle tipo rating HTML e CSS 5
T Visualizzare un Xml su un sito in modo semplice XML 1
F Visualizzare data in formato gg/mm/aaaa da database mysql. PHP 3
M [PHP] Visualizzare record nel db PHP 2
M Visualizzare immagini in PHP - MYSQL PHP 0
M Visualizzare immagini da DB in php PHP 0
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
G [PHP] CodeIgniter - Visualizzare singolo risultato PHP 4
Y VISUALIZZARE IMMAGINI DA DB PHP/MYSQL PHP 7
trattorino [PHP] funzione per visualizzare solo carattere PHP 2
S [HTML] Visualizzare XML formattato in HTML HTML e CSS 9
M Visualizzare su più pagine risultato query con fpdf PHP 6
Mer556 Visualizzare un sito nel browser HTML e CSS 1
M Visualizzare da una classe esistente ogni profilo utente PHP 1
Creatt Visualizzare un immagine al mopmento di un messaggio di alert Javascript 7
M Visualizzare tabella in base a selezione PHP 1
T php e mysql - visualizzare righe in colonna PHP 4
A Non riesco più a visualizzare il codice sicurezza nel forum Supporto Mr.Webmaster 3
M Visualizzare data formato 'gg-mm-aaaa' da data timestamp nel DB PHP 1
P non riesco a visualizzare i dati dopo aver inserto l'id PHP 36
A visualizzare testo a seguito di check radio button Javascript 1

Discussioni simili