Upload photos with preview Javascript / Ajax

Question

Upload photos with preview Javascript / Ajax

Navigation

#1 by (1 votes)

1

Hello, I'm doing an administrative site, this site will have the option to upload photo, the user could upload up to 3 photos.

My idea was to make facebook type, where you click and add the photo of the post, the problem and what 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, which 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 about how to do this so I can barely explain what I'd like.

If anyone can help me, I'll be grateful.

javascript jquery c# ajax

asked by anonymous 12.09.2016 / 20:34

1 answer

Loop execution failed How to set the generator (from firebird) to an Entity framework 6 model field?

score 1 · Accepted Answer

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 note, is that in the beginning, I'm customizing, the input, and using display:none to hide it. Another important point is the multiple attribute, which allows you to select more than one file. Below you will see the limiter, where in this case you can only select 3 files, and even if you select 1 by 1 more than 3, it will not be allowed either.

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