[Resolvido] Formulário de Upload de arquivo

phporto · Junho 4, 2012

Olá! Estou tentando implementar um formulário para envio de arquivos. Ele está funcionando (código anexo para teste), porém, apresenta o seguinte erro:

1) No envio do primeiro arquivo tudo funciona perfeitamente;

2) Utilizando o formulário novamente, quando tento enviar outro arquivo, o processo não funciona. A página é recarregada sem nenhuma alteração;

3) Com a página recarregada, se tentarmos novamente enviar o arquivo, ele funciona perfeitamente.

Conto com a sua colaboração para evitar este refresh desnecessário. Agradeço antecipadamente.

Segue o código dos arquivos:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PÁGINA DE UPLOAD DE ARQUIVO</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
        <!--
        $(document).ready(function() {
                var options = {
                    url:'upload.php',
                    beforeSubmit: function() {
                                        $('#uploader').html('<img src="loading.gif" border="0" />');
                                },
                    success:  function(html) {
                                        $('#uploader').html('');
                                        $('#divform').html(html);             
                                }
                };
         
                $('#upload').submit(function() {
                       $(this).ajaxSubmit(options);
                       return false;
                });
         
        });
        //-->
</script>
</head>
<body>
        <div id="divform">
            <h1>UPLOAD DE UM ARQUIVO</h1>
            <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
                    <label for="arquivo" >Arquivo: </label>
                    <input type="file" name="fileToUpload" id="fileToUpload" />
                    <br/><br/>
                    <input type="submit" id="uploadFile" value="Upload File" />
            </form>
        </div>
        <div id="uploader"></div>
</body>
</html>

upload.php

<?php
    echo '<pre>';
    print_r($_FILES);
    echo '</pre>';    
?>
    <h1>UPLOAD DE UM ARQUIVO</h1>
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
            <label for="arquivo" >Arquivo: </label>
            <input type="file" name="fileToUpload" id="fileToUpload" />
            <br/><br/>
            <input type="submit" id="uploadFile" value="Upload File" />
    </form>

Editado Junho 5, 2012 por phporto

fiote · Junho 4, 2012

$('#upload').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
});

Quando essa parte do código roda (no seu document.ready), o javascript busca o elemento #upload e adiciona uma função personalizada pra ser executada sempre que esse elemento der submit. Porém, na sua requisição ajax:

success: function(html) {
    $('#uploader').html('');
    $('#divform').html(html);             
}

Você está substituindo o conteúdo do elemento #divform com um novo bloco html. Sim, você tem um elemento #upload nesse bloco de código, mas concorda comigo quando eu digo que não é mais o mesmo elemento? A função foi adicionada à um elemento que não existe mais (já que você destroi o html antigo quando usa o $('#divform').html(html), substituindo por algo novo).

Você precisa associar a sua função ao novo elemento #upload.

Se resolver, não esqueça de adicionar "resolvido" no título do tópico!

phporto · Junho 5, 2012

Você precisa associar a sua função ao novo elemento #upload.

Muito obrigado pelas orientações. Compreendi o meu erro na estruturação do código. Infelizmente não tive êxito seguindo a sua sugestão de associar o novo elemento à função. A solução que encontrei foi a seguinte:

No arquivo index.php as alteraçoes foram na requisição abaixo

success:  function(html) {
                    $('#uploader').html('');
                    $('pre').remove();
                    $('#divform').prepend(html);
                    $('#fileToUpload').val('');                 
            }

além de incluir as tags pre na div com id="divform".

<div id="divform">
            <pre></pre>
            <h1>UPLOAD DE UM ARQUIVO</h1>

No arquivo upload.php removendo o formulário.

um forte abraço, valeu!

fiote · Junho 5, 2012

waaaaaaat? lol.

Alterar o seu success pra isso aqui não funcionou não?

success:  function(html) {
    $('#uploader').html('');
    $('#divform').html(html);       
    $('#upload').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });    
}

phporto · Junho 5, 2012

waaaaaaat? lol.

Alterar o seu success pra isso aqui não funcionou não?

success:  function(html) {
    $('#uploader').html('');
    $('#divform').html(html);       
    $('#upload').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });    
}

Parabéns! Desta forma funcionou sim. Eu tinha tentado implementar de outra forma sem sucesso. Obrigado pela colaboração e o aprendizado, grande abraço.

Entrar

[Resolvido] Formulário de Upload de arquivo

Pergunta

phporto

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

fiote

Link para o comentário

Compartilhar em outros sites

phporto

Link para o comentário

Compartilhar em outros sites

fiote

Link para o comentário

Compartilhar em outros sites

phporto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades