Error sending Upload with Ajax

11

I'm trying to upload a file via Upload to a certain folder but I'm not able to make or understand the error being accused by the script, I'll try to be as clear as possible in describing the problem. Here is the excerpt from Upload Upload:

// INÍCIO GRAVA UPLOAD
function GravaUpload(event) {

    event.preventDefault();

    var params = $('#frmUpload').serializeArray();  
    $("#resultado-upload").html('<img src="../_imagens/ajax-loader.gif" alt="Enviando..." />');

    $.post(
        'GravaUpload.php',
        params,
        function( json, textStatus, jQxhr )
        {               
            if (json.status != "ERRO") {
                var msg = '<div class="alert alert-info" role="alert">' + json.msg + '</div>' ;
            } else {
                var msg = '<div class="alert alert-danger" role="alert">' + json.msg + '</div>' ;
            }
            $("#resultado-upload").html(msg);
        },
        'json'
    )
    .fail(function( jqXhr, textStatus, errorThrown ){

        console.log( jqXhr, textStatus, errorThrown );
        try {
            var json = $.parseJSON(jqXHR.responseText);
            var msg = '<div class="alert alert-danger" role="alert">' + json.errorMessage + '.</div>';
            $("#resultado-upload").html(msg);
        } catch(e) { 
            var msg = '<div class="alert alert-danger" role="alert">Ocorreu um erro ao tentar manipular os dados. Verifique sua conexão com o banco de dados.</div>';
            $("#resultado-upload").html(msg);
        }
    });
}  // FIM GRAVA DETALHES DO CONTRATO

$(document).ajaxError(function (e, data, settings, exception) { 
    console.log(e, data, settings, exception);
});

$(document).ready(function() {

    //***** Validações de campos e envio do formulario por AJAX
    $("#frmUpload").validate({
        rules: {
            fileUpload: {
                required: true,
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },

        //Monta a mensagem em uma caixa separada se necessário
        //errorLabelContainer: $('#mensagens'),

        //função para enviar após a validação
        submitHandler: function(form) {
           GravaUpload(event);
        } //end-submiteHandler  
    });
});

Shipping Form:

<form class="well" id="frmUpload" action="" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="fileUpload">Selecione o Documento para Upload</label>
        <input type="file" name="fileUpload">
    </div>
    <input type="submit" class="btn btn-primary" value="Upload">
</form> 

Upload process:

// Ativar relatórios de erro php
error_reporting(E_ALL);
ini_set('display_errors', 1);


if ($_SERVER['REQUEST_METHOD'] == 'POST') { 

    $name     = $_FILES['fileUpload']['name'];
    $tmpName  = $_FILES['fileUpload']['tmp_name'];
    $error    = $_FILES['fileUpload']['error'];
    $size     = $_FILES['fileUpload']['size'];
    $ext      = strtolower(pathinfo($name, PATHINFO_EXTENSION));

    switch ($error) {
        case UPLOAD_ERR_OK:
            $valid = true;
            //validate file extensions
            if ( !in_array($ext, array('jpg','jpeg','png','gif','doc','docx','pdf','xls')) ) {
                $valid = false;
                $aretorno["msg"] = 'Extensao de arquivo invalida ';
            }
            //validate file size
            if ( $size/1024/1024 > 2 ) {
                $valid = false;
                $aretorno["msg"] = 'Tamanho do arquivo e superior a tamanho maximo permitido';
            }
            //upload file
            if ($valid) {
                $targetPath =  dirname( __FILE__ ) . DIRECTORY_SEPARATOR. 'arquivos' . DIRECTORY_SEPARATOR. $name;
                move_uploaded_file($tmpName,$targetPath); 
                header( 'Location: DetalhesContrato.php' ) ;
                exit;
            }
            break;
        case UPLOAD_ERR_INI_SIZE:
            $aretorno["msg"] = 'O arquivo enviado excede a directiva upload_max_filesize em php.ini.';
            break;
        case UPLOAD_ERR_PARTIAL:
            $aretorno["msg"] = 'O arquivo foi apenas parcialmente enviado.';
            break;
        case UPLOAD_ERR_NO_FILE:
            $aretorno["msg"] = 'Nenhum arquivo foi transferido.';
            break;
        case UPLOAD_ERR_NO_TMP_DIR:
            $aretorno["msg"] = 'Faltando uma pasta temporaria. Introduzida no PHP 4.3.10 e PHP 5.0.3.';
            break;
        case UPLOAD_ERR_CANT_WRITE:
            $aretorno["msg"] = 'Falha ao gravar arquivo em disco. Introduzido no PHP 5.1.0.';
            break;
        default:
            $aretorno["msg"] = 'Erro desconhecido';
        break;
    }

    // echo $response;


    //retornando o status / mensagem da execução
    header('Content-Type: application/json');
    echo json_encode($aretorno);    

}

The upload falls on the first exception:

var msg = '<div class="alert alert-danger" role="alert">Ocorreu um erro ao tentar manipular os dados. Verifique sua conexão com o banco de dados.</div>';

I'm not yet using a connection to BD because I'm not sending anything.

    
asked by anonymous 28.07.2015 / 15:16

1 answer

6

It always falls into the first exception because it is not a problem with the database, but with try/catch .

Solving the problem on the front end

try {
    var json = $.parseJSON(jqXHR.responseText);
    var msg = '' + json.errorMessage + '.';
    $("#resultado-upload").html(msg);
} catch(e) { 
    var msg = 'Ocorreu um erro ao tentar manipular os dados. Verifique sua conexão com o banco de dados.';
    $("#resultado-upload").html(msg);
}

No catch you should report the error of parseJSON , but instead you created an error in the front end that does not correspond to the jqXHR.responseText error, ie it is a logic fault of your own. The correct one was to display the error of the e variable, the use of $.post is also without done and $.post does not upload until I know, you should use FormData for this.

An example as $.ajax and FormData :

function GravaUpload(event) {
    var arquivo = $('#frmUpload input[name=fileUpload]');

    var dados = new FormData;
    dados.append('fileUpload', arquivo[0]);

    $.ajax({
        url: 'file/destination.html', 
        type: 'POST',
        data: dados,
        dataType: "json",//Força o tipo json na resposta
        processData: false
    }).done(function(data) {
        $("#resultado-upload").html(data.msg);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        $("#resultado-upload").html("Erro:" + textStatus);
    });
}

Alternatively you can also use link

Solving the problem in the back end

The other problem is in PHP, where you set this $aretorno["msg"] , but the $aretorno variable does not exist, so there must be some error in your php saying something like:

  

Undefined variable $ environment

To fix it, just create the variable of type array, like this:

error_reporting(E_ALL);
ini_set('display_errors', 1);

$aretorno = array();//Cria a variavel

if ($_SERVER['REQUEST_METHOD'] == 'POST') { 

    $name     = $_FILES['fileUpload']['name'];
    $tmpName  = $_FILES['fileUpload']['tmp_name'];
    $error    = $_FILES['fileUpload']['error'];
    $size     = $_FILES['fileUpload']['size'];
    $ext      = strtolower(pathinfo($name, PATHINFO_EXTENSION));

    switch ($error) {
        case UPLOAD_ERR_OK:
            $valid = true;
            //validate file extensions
            if ( !in_array($ext, array('jpg','jpeg','png','gif','doc','docx','pdf','xls')) ) {
                $valid = false;
                $aretorno["msg"] = 'Extensao de arquivo invalida ';
            }
            //validate file size
            if ( $size/1024/1024 > 2 ) {
                $valid = false;
                $aretorno["msg"] = 'Tamanho do arquivo e superior a tamanho maximo permitido';
            }
            //upload file
            if ($valid) {
                $targetPath =  dirname( __FILE__ ) . DIRECTORY_SEPARATOR. 'arquivos' . DIRECTORY_SEPARATOR. $name;
                move_uploaded_file($tmpName,$targetPath); 
                header( 'Location: DetalhesContrato.php' ) ;
                exit;
            }
            break;
        case UPLOAD_ERR_INI_SIZE:
            $aretorno["msg"] = 'O arquivo enviado excede a directiva upload_max_filesize em php.ini.';
            break;
        case UPLOAD_ERR_PARTIAL:
            $aretorno["msg"] = 'O arquivo foi apenas parcialmente enviado.';
            break;
        case UPLOAD_ERR_NO_FILE:
            $aretorno["msg"] = 'Nenhum arquivo foi transferido.';
            break;
        case UPLOAD_ERR_NO_TMP_DIR:
            $aretorno["msg"] = 'Faltando uma pasta temporaria. Introduzida no PHP 4.3.10 e PHP 5.0.3.';
            break;
        case UPLOAD_ERR_CANT_WRITE:
            $aretorno["msg"] = 'Falha ao gravar arquivo em disco. Introduzido no PHP 5.1.0.';
            break;
        default:
            $aretorno["msg"] = 'Erro desconhecido';
        break;
    }
} else {
    //Envia um erro acaso o usuário tente acessar o script por outros métodos
    $aretorno["msg"] = 'Método HTTP não suportado para está ação';
}

header('Content-Type: application/json');
echo json_encode($aretorno);

Extras

Note that pathinfo only takes the extension and often the extension may not represent the actual contents of the file, since the extension can be changed, this is very IMPORTANT , because if you want to guarantee that the type of file sent is what you want then you will have to use another method, I answered a question about it and it can help you, see:

Just change the variable to:

$permitidos = array(
    'jpg','jpeg','png','gif','doc','docx','pdf','xls'
);

and use the variable $tmpName to get mimetype.

$permitidos = array(
    'jpg','jpeg','png','gif','doc','docx','pdf','xls'
);

$infos = mimeType($tmpName);

//Transforma image/jpeg em jpeg por exemplo
$infos = preg_replace('#^[a-zA-Z\-]+\/#', '', $infos);

$infos = str_replace('x-', '', $infos);

if (false === in_array($infos, $permitidos)) {
    $aretorno["msg"] = 'O tipo de arquivo enviado é inválido, permitido somente imagens';
}
    
29.07.2015 / 20:19