Upload photos with Javascript/Ajax preview

Question

Hello, I’m making an administrative website, in this site will have the option to upload photo, the user could upload up to 3 photos.

My idea was to make kind of facebook, where you click and add the photo of the post, the problem and I wanted as soon as the photo was added it already appeared in a preview.

This is my view:

<div class="row">
<div class="col-lg-2"></div>
<div class="col-md-8">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Nova Publicação</h3>
        </div>

        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
            <div class="box-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">Título</label>
                    <input type="text" class="form-control" id="produtoTitulo" placeholder="Digite o titulo da publicação...">
                </div>
                <div class="form-group">
                    <label>Descrição (até 1000 caracteres)</label>
                    <textarea id="produtoDescricao" placeholder="Digite a descrição do produto..." class="textarea" style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid rgb(221, 221, 221); "></textarea>
                </div>

                <div class="form-group" style="margin-top:20px">
                    <label for="exampleInputFile">Máximo de 3 Fotos</label>
                    <input type="file" id="exampleInputFile">

                    <p class="help-block">Resolução máxima : 1200x1200px</p>
                </div>



            <div class="box-footer">
                <button type="submit" id="btnSubmit" class="btn btn-primary">Publicar</button>
                <a href="@Url.Action("Produto","Index", new {area="Lojista"})" class="btn btn-warning">Voltar</a>
            </div>


        </form>
    </div>
    <div class="col-lg-2"></div>
</div>

I was trying with this example inputfile , you click and select the photo , but I needed the option to select 3 images and still show a preview in some box.

I’m completely clueless as to how to do this I can barely explain what I’d like.

If anyone can help me I’d be grateful.

Answer 1

You can see this code as an example:

<legend class="leg_img">Insira imagens</legend>
<fieldset id="upload_img" class="nf_class upload_img">
    <input type="file" id="files" name="files[]" multiple accept="image/*" style="display:none;" />
    <a href="#" id="fileSelect" >selecionar</a>
    <div id="list" style="margin-bottom:0;"></div>
</fieldset>

<script type="text/javascript">
var fileSelect = document.getElementById("fileSelect");
var fileElem = document.getElementById("files");



    fileSelect.addEventListener("click", function(e){
        fileSelect.style.cssFloat = "right";
        fileSelect.style.marginRight = "3px";
        fileSelect.style.marginTop = "-3px";
        if(fileElem){
            fileElem.click();}
        e.preventDefault();}
    , false);

function handleFileSelect(evt) {

    var list = document.getElementById("list").childElementCount;
    var files = evt.target.files;
    var qtde = files.length;
    var nomes = fileElem.files;
    var nome;

    if(qtde > 3 || list > 2){
        alert('apenas 3');
        document.getElementById('files').value = ""; 
        return;
        }else{
            for(var i = 0, f; f = files[i]; i++){
                if(!f.type.match('image.*')){
                    continue;}
                var reader = new FileReader();
                reader.onload = (function(theFile){
                    return function(e) {
                        var span = document.createElement('span');
                        span.innerHTML = 
    "<a href='#'><img style='float:left;padding: 3px;height: 33px; width: 33px; border: 1px solid #c7c7c7;margin-top: 0px;' src='" + e.target.result + "'" + "title='" + escape(theFile.name) + "'/>X</a>";
                        document.getElementById('list').insertBefore(span, null);
                        span.children[0].addEventListener("click", function(evt){
                           span.parentNode.removeChild(span);
                        });
                    };
                })(f);
                reader.readAsDataURL(f);
            } 
            return true;}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

The relevant points to be noted, is that at the beginning, I’m customizing, input, and using the display:none to hide it. Another important point is the attribute multiple, which allows you to select more than one file. Below you will see the limiter, where in this case it is only possible to select 3 files, and even if you select 1 by 1 more than 3, it will also not be allowed.

Well I hope it helps, anything comment, and we adjust.