<input type="file" id="inp-select-img" multiple="multiple" /> <div id="div-conteudo"> <div id="div-imgs"> </div> </div> var _imgCarregando = new Image(); var _arrayUrls = new Array(); $(document).ready(function () { $("#inp-select-img").change(function (data) { $("#inp-select-img").html(""); var countLocal = _arrayUrls.length; var indiceControle = _arrayUrls.length; $.each(data.target.files, function (indice, obj) { _arrayUrls.push({ "indice": countLocal, "url": obj, "type": obj.type }); countLocal += 1; }); carregarArquivo(_arrayUrls[indiceControle]); }); }); function carregarArquivo(obj) { if (obj) { if (obj.type.match('image.*')) { var url = window.URL.createObjectURL(obj.url); _imgCarregando.onload = function () { var canvas = document.createElement("canvas"); canvas.height = 150; canvas.width = this.width * canvas.height / this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); $("#div-imgs").append("<img height='150' class='img-editar' id=" + obj.indice + " src=''/>"); var arqFinal = canvas.toDataURL(obj.type, 1); $("#" + obj.indice).attr("src", arqFinal); window.URL.revokeObjectURL(url); $('html, body').prop("scrollTop", $("#div-imgs").height()); carregarArquivo($.grep(_arrayUrls, function (objAbrir) { return objAbrir.indice == obj.indice + 1; })[0]); }; _imgCarregando.src = url; } } else _imgCarregando = new Image(); } As imagens são carregadas uma a uma pra não dar estouro de memória na renderização. Ainda assim, no FF, precisei usar um timeout.