Ir para conteúdo

POWERED BY:

FabianoSouza

FileReader retornando valor

Recommended Posts

Preciso:
1) Fazer a renderização de imagem

2) Preciso que essa mesma function retorno algum valor de "status", para eu utilizar pela "function pai".

A function funciona, renderiza a imagem quando click num botão. Mas não retorna corretamente o valor da variável msg

 

Ilustrando:

Essa seria a function "pai" renderImg(obj), que passa os parâmetros necessários para a function que faz o render.

 

//chamo essa function no click de um botão (e passo parâmetros)
renderImg(obj)

//************************************************
// renderiza imagem selecionada no computador do usuário
function renderImg(e)
{
	var $elemImg = e.alvo
	, ofile = e.inpfile
	, reader = new FileReader()
	, files = e.inpfile.files // FileList object
	, path = e.path;
	var msg = ''

	reader.onload = (function(theFile) {
	return function(e) {
//renderiza prévia da imagem
	$elemImg.setAttribute('src', e.target.result)
	var msg = "OK!";
	  };
  })

  (files[0]);
	//Read in the image file as a data URL.
	reader.readAsDataURL(files[0]);

	reader.onerror = function(event) {
		msg =  "ERRO"
	}

//Preciso que a variável msg retorno os status de sucesso ou erro.
return  msg
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
function renderImg(e, callback) {
    var $elemImg = e.alvo,
        ofile = e.inpfile,
        reader = new FileReader(),
        files = e.inpfile.files, 
        path = e.path;

    reader.onload = function (theFile) {
        return function (e) {
            $elemImg.setAttribute('src', e.target.result);
            callback("OK!");
        };
    }(files[0]);
    reader.readAsDataURL(files[0]);

    reader.onerror = function (event) {
        callback("ERRO");
    };
}

function Teste() {
    var e = {
        alvo: document.getElementById('elementoImagem'),
        inpfile: document.getElementById('elementoInputArquivo'),
        path: 'caminho/para/imagem'
    };

    renderImg(e, function (status) {
        console.log(status);
    });
}
<img id="imagemPreview" src="#" alt="Prévia da imagem">
<input id="inputArquivo" type="file">
<button onclick="Teste()">Carregar Imagem</button>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por gRoOvE
      Quero que quando terminar de executar o $arquivos.addEventListener("change", execute automaticamente a function showResults()..esse FileReader funciona de modo assíncrono, e eu preciso que ele tenha terminado todo o processo pra dai fazer a validação que eu preciso.
       
      Fiz um botão pra chamar o showResults(), mas gostaria que ele fosse automatico no callback.
       
      Segue meu código abaixo:
      var $arquivos = document.getElementById("arquivos"); var results = []; $arquivos.addEventListener("change", function(){ var files = event.target.files; results = []; for(var i=0; i < files.length; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = (function(f) { return function(e) { results.push(e.target.result); } })(file); reader.readAsText(file); } }); function showResults() { if (results[0] === results[1]) { alert("Same files!") } else { alert("Different files!") } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.