2
respostas

Erro no jquery.js no upload

Estou tendo um erro no jquery.js ao selecionar a imagem e tenta enviá-la ao servidor = TypeError: name is undefined[Learn More]? Ja tentei alterar as versões e o erro só muda o número!

2 respostas

Olá Clerman, tudo bem? Pode colar seu código aqui?

Olá Vandré, segue o cod:

$(document).ready(function() {

    str = window.location.pathname;
    urlPath = url('-1', str);
    area180 = $(".area180");
    loadDiv = $(".loaderUpload");
    erroUpload = $("#erroUploadAvatar");

    loadDiv.fadeToggle();
    erroUpload.hide();

    $.ajax({
        url: "/financeiro/usuario/perfilUsuario/" + urlPath,
        type: "GET",
        success: function(response){
            loadDiv.fadeOut();
            console.log("Vou ver aqui " + response.foto);

            if(response.foto != null){
                console.log("foto não nula " + response.foto);
                showInfo();
                $(".uploadTxt").fadeOut();
                $("#targetLayer").html('<img src="' + response.foto + '" class="avatar avatar-180 uploadImgBordered" />');
                area180.removeClass("uploadArea");
                $(".icon-choose-user").hide();
                area180.addClass("uploadAreaReplace");

                setTimeout(function(){
                    $("#uploadChecked").fadeIn();
                }, 500);
                setTimeout(function(){
                    $("#uploadChecked").fadeOut();
                }, 3500);
            }else{
                console.log("Sem imagem");
            }
        },
        error: function(){
            loadDiv.fadeOut();
            erroUpload.show();
            $(".erroUploadTxt").html(xhr.statusText);

            setTimeout(function(){
                erroUpload.hide();
            }, 10000);
        }
    });

    $("#upload-file-input").on("change", uploadFile);
});

function showInfo(){
    area180.hover(function(){
        $(".uploadTxt").fadeIn();

    }, function(){
         $(".uploadTxt").fadeOut();
    });
}

function showPreview(objFileInput) {

    console.log("===========================");

    showInfo();

    pieces = $('#upload-file-input')[0].value.split('.');
    extension = pieces[pieces.length-1].toLowerCase();
        if(extension == 'jpg' || extension == 'jpeg' || extension == 'png') {

            if (objFileInput.files[0]) {
                var fileReader = new FileReader();
                fileReader.onload = function (e) {
                    loadDiv.fadeToggle();
                    $("#targetLayer").html('<img src="' + e.target.result + '" class="avatar avatar-180 uploadImgBordered" />');
                    area180.removeClass("uploadArea");
                    $(".icon-choose-user").fadeOut();
                    area180.addClass("uploadAreaReplace");
                }
                fileReader.readAsDataURL(objFileInput.files[0]);
            };
        }else{

            erroUpload.show();
            $(".erroUploadTxt").html("Extensão<br> inválida. Apenas JPG, JPEG e PNG");

            setTimeout(function(){
                erroUpload.hide();
            }, 10000);
        }
}

function uploadFile() {
    var header = $("meta[name='_csrf_header']").attr("content");
    var token = $("meta[name='_csrf']").attr("content");
    var codigo = $("#upload-file-input").data("codigo");

    $.ajax({

        url : "/fotos/uploadFile/" + codigo,
        type: "POST",
        data: new FormData($("#upload-file-form")[0]),
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        beforeSend: function(xhr){
            xhr.setRequestHeader(header, token);
        },
        success: function(response) {
            loadDiv.fadeOut();

            $(".uploadTxt").fadeOut();

            area180.removeClass("uploadArea");
            area180.show();
            $(".icon-choose-user").fadeOut();
            area180.addClass("uploadAreaReplace");

            setTimeout(function(){
                $("#uploadChecked").fadeIn();
            }, 500);
            setTimeout(function(){
                $("#uploadChecked").fadeOut();
            }, 3500);

        },
        error: function (xhr, ajaxOptions, thrownError, response) {
            loadDiv.fadeOut();
            $(".uploadTxt").fadeOut();

            $(".uploadImgBordered").hide();
            area180.addClass("uploadArea");
            $(".icon-choose-user").fadeIn();

            erroUpload.show();
            $(".erroUploadTxt").html(xhr.responseJSON.message);

            setTimeout(function(){
                erroUpload.hide();
            }, 10000);
        }
    });
}

e o do form que recebe a img:

<form id="upload-file-form">
                        <div class="area180 uploadArea">
                            <div id="targetLayer"></div>
                                <img src="<c:url value="/global/portraits/sua-foto.png"/>" class="icon-choose-user" />
                                <span class="uploadTxt">
                                    <i class="icon ml-cloud-upload font-size-40" aria-hidden="true"></i></br>
                                    Arraste uma foto aqui</br> ou clique</br>
                                </span>
                            <div class="icon-choose-image" >
                            <div class="loaderUpload pt-10 h-40 text-center font-size-40"><div class="loader loader-circle"></div></div>
                            <div id="uploadChecked" class="pt-50">

                            <div class="btn btn-icon btn-success btn-round"><i class="icon wb-check font-size-20" aria-hidden="true"></i></div>
                            </div>
                            <input name="avatar" id="upload-file-input" type="file" class="inputFile" 
                                 onChange="showPreview(this);" data-codigo="${usuario.id}" />
                            <div id="erroUploadAvatar" class="alert alert-danger alert-dismissible text-left text-break" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <div class="erroUploadTxt"></div>
                            </div>
                            </div>
                        </div>
                        </form>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software