membuat input gambar dengan thumnail



Hari ini saya membuat tutorial membuat input gambar dengan thumbnail di bootstrap
berikut ini adalah preiviewnya





berikut ini merupakan snippet atau sytax  HTML-nya
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new"><i class="icon-folder-open"></i> Pilih Gambar</span><span class="fileinput-exists"><i class="icon-refresh"></i>Ganti</span><input type="file" name="image"></span>
<a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput"><i class="icon-trash icon-white"></i>Hapus</a>
</div>
</div>
</div>

dan untuk menambahkan thumnailnya kita gunakan code CSS berikut ini.

/*Input*/
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
input[type="text"].title{
font-size: 15px;
height: auto;
padding: 7px 9px;
background: #F9F9F9;
font-weight: bold;
color: #5b5b5b;
letter-spacing: 150%;
}
.form-actions {
padding: 19px 20px 5px 0;
background-color: #fff;
margin-bottom: 0px;
}
.form-horizontal .form-actions {padding-left: 0px;}
.btn-file {
overflow: hidden;
position: relative;
vertical-align: middle;
}
.btn-file > input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 23px;
direction: ltr;
cursor: pointer;
}
.fileinput {
margin-bottom: 9px;
margin-top: 9px;
display: inline-block;
}
.fileinput i {margin-right: 5px;}
.fileinput .uneditable-input {
display: inline-block;
margin-bottom: 0px;
vertical-align: middle;
cursor: text;
}
.fileinput .thumbnail {
overflow: hidden;
display: inline-block;
margin-bottom: 5px;
vertical-align: middle;
text-align: center;
}
.fileinput .thumbnail > img {max-height: 100%;}
.fileinput .btn {vertical-align: middle;}
.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {display: none;}
.fileinput-inline .fileinput-controls {display: inline;}
.fileinput .uneditable-input {white-space: normal;}
.fileinput-new .input-group .btn-file {border-radius: 0 4px 4px 0;}
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-sm {border-radius: 0 3px 3px 0;}
.fileinput-new .input-group .btn-file.btn-lg {border-radius: 0 6px 6px 0;}
.form-group.has-warning .fileinput .uneditable-input {
color: #c09853;
border-color: #faebcc;
}
.form-group.has-warning .fileinput .fileinput-preview {color: #c09853;}
.form-group.has-warning .fileinput .thumbnail {border-color: #faebcc;}
.form-group.has-error .fileinput .uneditable-input {
color: #b94a48;
border-color: #ebccd1;
}
.form-group.has-error .fileinput .fileinput-preview {color: #b94a48;}
.form-group.has-error .fileinput .thumbnail {border-color: #ebccd1;}
.form-group.has-success .fileinput .uneditable-input {
color: #468847;
border-color: #d6e9c6;
}
.form-group.has-success .fileinput .fileinput-preview {color: #468847;}
.form-group.has-success .fileinput .thumbnail {border-color: #d6e9c6;}
.input-group-addon:not(:first-child) {border-left: 0;}
sekian tutorial singkatnya jika ada pertanyaan silakan tinggalkan komentarnya ya :)

0 Comments

Jika ada pertanyaan seputar artikel limcoding jangan sungkan untuk bertanya