1

Olá, estou fazendo um site administrativo, neste site vai ter a opção de subir foto, o usuário poderia subir até 3 fotos.

A minha ideia era fazer tipo do facebook, onde vc clica e adiciona a foto da postagem, o problema e que eu queria assim que a foto fosse adicionada ela já aparecesse em um preview.

Esta é minha 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>

Eu estava tentando com esse example inputfile , que você clica e seleciona a foto , mas eu precisava da opção de selecionar 3 imagens e ainda mostrar um preview em algum box.

Eu estou completamente sem noção de como fazer isso que mal consigo explicar o que eu gostaria.

Caso alguem possa me ajudar ficarei grato.

1 Resposta 1

1

Pode ver esse código como um exemplo:

<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>

Os pontos relevantes a ser observado, é que no inicio, eu estou customizando, o input, e usando o display:none para escondê-lo. Outro ponto importante é o atributo multiple, que lhe permite selecionar mais de uma arquivo. Mais abaixo, verá o limitador, onde neste caso só é possível selecionar 3 arquivos, e mesmo que selecione 1 por 1 mais do que 3, também não será permitido.

Bom espero que ajude, qualquer coisa comente, e ajustamos.

3
  • Vou testar e da uma olha no seu código mas desde já agradeço a ajuda , logo eu volto para dar um resposta. Commented 12/09/2016 às 18:59
  • Legal cara era isso mesmo , acho qeu vou ter mais algumas duvidas quando vou ter que dar post , eu percebi que o botão de excluir ta um pouco estranho ,mas qualquer coisa eu posto aqui , muito obrigado mesmo já vou colocar sua resposta como certa, valew cara. Commented 12/09/2016 às 19:10
  • Opa qq coisa vai comentando...O botão de excluir, na verdade era uma imagem...ai deixei só o x...
    – MagicHat
    Commented 12/09/2016 às 19:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .