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.