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!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!
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>