Ir para conteúdo
Fórum Script Brasil
  • 0

[Resolvido] Formulário de Upload de arquivo


phporto

Pergunta

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 por phporto
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0

$('#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!

Link para o comentário
Compartilhar em outros sites

  • 0
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!

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0
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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...