1

A estrutura do site é a seguinte:

index.html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       // verifica se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado...
        $(document).ready(function(){
            $(".ajax").on("click", function(e){
                e.preventDefault(); //eliminamos o evento
                var path = $(this).attr('href'); //Pegamos o caminho
                $("#main").empty();
                $("#main").load(path); //Faz uma requisição http para o servidor. //carrega a página (o path) passada como parâmetro... 
            });
        });
</script>


<body>
    <nav>
            <ul>
                <li><a href="./contato.html" class="ajax" data-title="Meu site - Contato">Contato</a></li>
                <li><a href="./sobre.html" class="ajax" data-title="Meu site - Sobre">Sobre</a></li>
                <li><a href="./upload.php" class="ajax" data-title="Meu site - upload">upload</a></li>

            </ul>
    </nav>

   <article id='main'> <!-- #main será atualizado consoante a navegação que o utilizador fizer via Ajax... -->         

      <!-- Home.html -->  


   </article>

</body>

upload.php:

<?php

include 'functions.php';
include 'db_connect.php';

$requestMethod = isset($_SERVER['REQUEST_METHOD']) ? $_SERVER['REQUEST_METHOD'] : null;
$submit = isset($_POST['submit']) ? $_POST['submit'] : null;

//Pregunta si está llegando una petición por POST, lo que significa que el usuario envió (submit) el formulario.
if ($requestMethod === 'POST' && $submit === 'Upload'){

    $file_audio = $_FILES["input_audio"]; 
    $file_cover = $_FILES["input_cover"]; 

    $errors_file_audio = valida_file_audio($file_audio); 

    $errors_file_cover = valida_file_cover($file_cover);

     if (empty($errors_file_audio) && empty($errors_file_cover)){

            $status  =  save_files($file_audio, $file_cover, $mysqli);

             if (is_array($status) && !empty($status)){

                foreach ($status as $item){
                    echo "<label> <p style='color:red;'>" . $item . "<br />" . "</p></label>";
                }
            }else{
                    //echo"<label> <p style='color:green;'> Upload realizado com sucesso!</p> </label>";
                 } 

    }

}

?>

<!-- Validar Campos com JavaScript e JQuery -->
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="validar.js" type="text/javascript"></script>
<!--CSS para configurar as mensagens de erro (js e Jquery) -->

<style type="text/css">
/* Estilizar os alertas */
label.error{
padding-left: 5px;
color: red;
font-weight: bold;
}
</style>



<div class='upload'>


        <h1>Upload</h1>

            <?php
            $sucesso = isset($_GET['sucesso']) ? $_GET['sucesso'] : null;

            if ($sucesso == 'sdfgjhksladtfJH456') {

                echo"<label> <p style='color:green;'> Upload realizado com sucesso!</p> </label>";

            }

            ?>

            <form id="form_Upload" enctype="multipart/form-data" action="upload.php"  method="POST">

                        <label for="audio">MP3:</label><br />
                        <input type="file" name="audio" id="audio" size="45" />    

                        <?php

                            $errors_file_audio = isset($errors_file_audio) ?  $errors_file_audio : null;

                                if (is_array($errors_file_audio)){

                                    foreach ($errors_file_audio as $item){

                                         echo " <label> <p style='color:red;'>" . $item . "<br />" . "</p>  </label>";

                                    }
                                }

                        ?>

                        <br /><br />

                        <label for="cover">Cover:</label><br />
                        <input type="file" name="cover" id="cover" size="45" />

                        <?php

                             $errors_file_cover = isset($errors_file_cover) ?  $errors_file_cover : null;

                                if (is_array($errors_file_cover)){

                                    foreach ($errors_file_cover as $item){

                                         echo "<label> <p style='color:red;'>" . $item . "<br />" . "</p>  </label>";

                                    }
                                }              
                        ?>

                        <br /><br />
                        <input type="submit" name="submit" value="Upload" />

                     </form>

</div>   

Ou seja, tenho uma página principal(index.html) que "carrega", via Ajax, para a tag <article></article> a página selecionada....

A ideia é submeter o formulário, sem ser redirecionado pelo atributo action="upload.php" da tag <form></form>. Isto é, ficar no index.html e manter o upload.php dentro da tag <article></article> mesmo depois de submeter os ficheiros.

Qual a solução ideal para este caso?

3
  • Sim, como faço isso em termos práticos?
    – user12141
    20/07/2014 às 20:19
  • De uma olhada nesse artigo, ele usa FormData para submeter o form com input file usando ajax. portfolio.planetjon.ca/2014/01/26/…
    – Wakim
    21/07/2014 às 16:33
  • Wakim, gradeço a tua disponibilidade.
    – user12141
    22/07/2014 às 9:49

2 Respostas 2

1

Dando um exemplo bem simples para o caso, passando via POST

js

$('form[name="NOMEDOFORM"]').submit( function(){
    event.preventDefault();
    $.ajax({
        url      : 'page.php',
        type     : 'POST',
        data     : { campoA : $("#campoA").val() , campoB : $("#campoB").val() },
        success  : function( resultado ){
            // ação quando o resultado for satisfatório
        }
    });
});


page.html

$campoA = $_POST['campoA'];
$campoB = $_POST['campoB'];
1
  • assim nao vai funcionar pois o form é criado via AJAX, dai voce tem que usar delegate e então você atrela o submit ao elemento.
    – marciop
    15/08/2014 às 14:59
1

Opa,

Cara, acho que basta voce dar preventDefault() no submit do form, não? Isso dentro de um delegate pois ele vai ser carregado via ajax.

Como por exemplo:

$('body').delegate("#frmAutenticar",'submit',function(e) {  
  e.preventDefault();
  // processa o formulario via ajax...          
});

Nesse caso, o #frmAutenticar será processado e a url não mudará, o usuário continua na mesma página. Dai é só adaptar ao seu form, o pulo do gato está no delegate já que seu form vem via ajax.

Refs:

2
  • submit é o recomendado para formulário 15/08/2014 às 4:14
  • estou usando submit depois de um delegate pois o form é criado via ajax depois do click, segundo o exemplo citado acima da pessoa que fez a pergunta.
    – marciop
    15/08/2014 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .