0

Tenho uma função jquery responsável por cortar uma foto quando ocorre um upload de foto:

document.addEventListener('DOMContentLoaded', function() {

    function readImage() {
        if (this.files && this.files[0]) {
            var file = new FileReader();
            file.onload = function(e) {
                document.getElementById("preview").src = e.target.result;
            };
            file.readAsDataURL(this.files[0]);
        }
    }

    document.getElementById("file").addEventListener("change", readImage, false);

    var x = document.getElementById("myDIV");

    $("[type=file]").on("change", function() {
        var file = this.files[0];
        var formdata = new FormData();
        formdata.append("file", file);
        if (file.name.length >= 30) {
            $('#name span').empty().append(file.name.substr(0, 30) + '..');
        } else {
            $('#name span').empty().append(file.name);
        }
        if (file.size >= 204800) {
            $('#preview').hide();
            $('#imgpadrao').show();
        } else {
            $('#imgpadrao').hide();
            $('#preview').show();
            $('.img-result').removeClass('hide');
        }
        var ext = $('#file').val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['png', 'jpg', 'gif', 'bmp']) == -1) {
            $('#info').hide();
            $('#size').hide();
            $('#labelfile').text('Escolha uma foto');
            $('#file').val('');
            $('#preview').hide();
            alert('Essa extensão de foto não é permitida!');
        }
    });

    //funcao crop:
    var cropper = '';
    $("#file").change(function(e) {
        if (e.target.files.length) {
            var file = this.files[0];
            if (file.size >= 204800) {
                $('.result').addClass('hide');
                $('#botaocortar').addClass('hide');
                alert('Esta imagem excedeu o tamanho máximo permitido (200kb)');
            } else {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = document.createElement("img");
                    img.id = 'image';
                    img.height = '300'
                    img.src = e.target.result;
                    $('.result').html('');
                    $('.result').removeClass('hide');
                    $('.result').append(img);
                    $('#botaocortar').removeClass('hide');
                    $('.options').removeClass('hide');
                    cropper = new Cropper(img);
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        }
    })
    $('#botaocortar').click(function(e) {
        e.preventDefault();
        var imgSrc = cropper.getCroppedCanvas({
            width: $('.img-w').val() 
        }).toDataURL();
        $('.cropped').removeClass('hide');
        $('.img-result').removeClass('hide');
        $('.cropped').attr('src', imgSrc);
        $('.download').removeClass('hide');
        $('.download').attr('download', 'imagename.png');
        $('.download').attr('href', imgSrc);
    })
});

O problema ocorre que quando troco de rota e depois volto pra página onde o script deveria ser executado, a função não é executada, só é executada depois que dou refresh na página. Alguém tem alguma ideia do que pode estar acontecendo?

6
  • Por que está usando o evento DOMContentLoaded ? Commented 26/07/2018 às 11:26
  • depois que percebi esse problema em que minha função só funcionava depois de recarregar a página, eu comecei a transformar essa função de jquery para javascript... ainda não terminei, tenho expectativa de que o problema não seja isso Commented 26/07/2018 às 11:27
  • Já testou usar $().ready(function () { no lugar de document.addEventListener('DOMContentLoaded', function() { ? Commented 26/07/2018 às 11:28
  • sim, era o que estava antes do domcontentloaded, acredito que o problema seja outro Commented 26/07/2018 às 11:29
  • Leticia, consegue inserir no Trecho de código uma demonstração do que está fazendo? Fica mais facil ajudar. Commented 26/07/2018 às 12:56

1 Resposta 1

0

Não consegui encontrar uma boa prática de como recarregar apenas os scripts quando a página é aberta, então estou dando um reload na page antes de ser carregada:

  <a (click)="reloadpage()" [routerLink]="['meuperfil']">Meu Perfil</a>

  reloadPage(){
    this.location.back();
  }

Agora tenho um reload na page, é um pouco incômodo, mas ao menos agora minha funcionalidade jquery funciona no angular.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .