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