Jump to content
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
}

 

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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!") } }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.