Generate Image Thumbnails Before Uploading

Question

Generate Image Thumbnails Before Uploading

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm looking for a non-plugin solution that generates thumbs of selected images in <input type="file"/> , preferably with Javascript or max jQuery .

The idea is to have something similar to this structure:

<div class="row">
  <div class="col-md-12">
    <input type="file" multiple/>
  </div>
  <div class="col-md-12">
    <div class="col-md-2">
    <img src="https://placehold.it/150?text=base64"/></div><divclass="col-md-2">
        <img src="https://placehold.it/150?text=base64"/></div><divclass="col-md-2">
        <img src="https://placehold.it/150?text=base64"/></div><divclass="col-md-2">
        <img src="https://placehold.it/150?text=base64"/></div><divclass="col-md-2">
        <img src="https://placehold.it/150?text=base64"/></div><divclass="col-md-2">
        <img src="https://placehold.it/150?text=base64" />
    </div>
  </div>
</div>

javascript jquery upload

asked by anonymous 15.03.2017 / 21:11

2 answers

Change Location of Exported Table of Primefaces How do I instantiate a class within a wpf? [closed]

score 0 · Answer 1

You can use the FileReader class of javascript.

This code has been implemented and changed based on another question. See the source!

function readURL() {
  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
        .show()
        .attr('src', e.target.result)
        .width(350)
        .height(350);
    };
    reader.readAsDataURL(this.files[0]);
  }
}

$('[type="file"]').on('change', readURL);

#blah {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype='file'/><imgid="blah" src="#" alt="your image" />

score 0 · Answer 2

<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();
    }

Images are uploaded one by one to avoid overflowing rendering. There are other ways to render a thumb of a selected image, such as FileReader for reading, for example, and reduced rendering of the image itself, however, it consumes a considerable memory. Thinking of uploading multiple images and not so much file size control. The difference of createObjectURL is that it 'creates a url' based on your document with the data in the file and the revokeObjectURL call soon removes it from your relationship with the page and its need for existence. I had trouble still with memory in FF, then I stopped seeing, but I made a timeout when the browser is FF to continue the loading and give some time to release the rendering.