<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<label for="category">Categories:</label>
<select multiple class="form-control" id="category">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
<table>
<thead>
<tr>
<th><label>Size</label></th>
<th><label>Color</label></th>
<th><label>Other</label></th>
<th><label>Price</label></th>
<th><label>Quantity</label></th>
<th><label>Promotion</label></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" name="size[]" type="text" placeholder="Size" /></td>
<td><input class="form-control" name="color[]" type="text" placeholder="Color" /></td>
<td><input class="form-control" name="other[]" type="text" placeholder="Other" /></td>
<td><input class="form-control" name="price[]" type="text" placeholder="Price" /></td>
<td><input class="form-control" name="quantity[]" type="number" placeholder="Quantity" /></td>
<td><input class="form-control" name="promotion[]" type="text" placeholder="Promotion" /></td>
<td>
<button class="btn btn-danger btn-remove" type="button">
<i class="glyphicon glyphicon-minus gs"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-add" type="button">
<i class="glyphicon glyphicon-plus gs"></i>
<b> Add</b>
</button>
</body>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
td {
padding:5px;
}
body {
padding:10px;
}
th {
text-align: center;
}
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
$(document).ready(function() {
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('table');
var currentEntry = $('table>tbody>tr:last');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(''); //Remove the Data - as it is cloned from the above
//Add the button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount > 1) {
var removeButtons = document.getElementsByClassName('btn-remove');
for(var i = 0; i < removeButtons.length; i++) {
removeButtons.item(i).disabled = false;
}
}
}).on('click', '.btn-remove', function(e) {
$(this).parents('tr:first').remove();
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
e.preventDefault();
return false;
});
// -- Start File Upload -- //
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
// Hover befor close the preview
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
// Create the close button
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
// Set the popover default content
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
// Clear event
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
// Create the preview image
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
// -- END File Upload -- //
});