<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<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">
<div class="image-preview-line">
<div class="preview-box pull-left"><img src="//placehold.it/90x90"></div>
<div class="pull-left">
<div class="preview-title">arbre_sepia.jpg</div>
<div class="preview-progress bg-primary rounded-sm pull-left" style="width : 200px; height : 15px;"></div>
<div class="preview-file-size pull-left">14 KB</div>
</div>
<div class="pull-right">
<span class="btn btn-success" style="margin-bottom : 2px;"><i class="glyphicon glyphicon-ok"></i></span><br>
<button type="button" class="btn btn-danger start"><i class="glyphicon glyphicon-trash"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="image-preview-line">
<div class="preview-box pull-left"><img src="//placehold.it/90x90"></div>
<div class="pull-left">
<div class="preview-title">arbre_sepia.jpg</div>
<div class="preview-progress bg-primary rounded-sm pull-left" style="width : 200px; height : 15px;"></div>
<div class="preview-file-size pull-left">14 KB</div>
</div>
<div class="pull-right">
<span class="btn btn-success" style="margin-bottom : 2px;"><i class="glyphicon glyphicon-ok"></i></span><br>
<button type="button" class="btn btn-danger start"><i class="glyphicon glyphicon-trash"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="image-preview-line">
<div class="preview-box pull-left"><img src="//placehold.it/90x90"></div>
<div class="pull-left">
<div class="preview-title">arbre_sepia.jpg</div>
<div class="preview-progress bg-primary rounded-sm pull-left" style="width : 200px; height : 15px;"></div>
<div class="preview-file-size pull-left">14 KB</div>
</div>
<div class="pull-right">
<span class="btn btn-success" style="margin-bottom : 2px;"><i class="glyphicon glyphicon-ok"></i></span><br>
<button type="button" class="btn btn-danger start"><i class="glyphicon glyphicon-trash"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div id="upload-toolbar" class="input-group pull-right" style="margin-top : 10px;">
<button type="button" class="btn btn-primary fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Ajouter des images...</span>
<input type="file" name="files[]" multiple="">
</button>
<button type="button" class="btn btn-success start">
<i class="glyphicon glyphicon-circle-arrow-right"></i>
<span>Envoyer tout</span>
</button>
<button type="button" class="btn btn-danger">
<i class="glyphicon glyphicon-trash"></i>
<span>Annuler</span>
</button>
</div>
</div>
</div>
</div>
.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;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px !important;
direction: ltr;
cursor: pointer;
}
.fileinput-button {
position: relative;
overflow: hidden;
display: inline-block;
}
/*.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}*/
.rounded-sm {
border-radius : 3px;
}
#upload-toolbar button {
margin-right : 2px;
}
.image-preview-line {
margin-bottom : 5px;
}
.image-preview-line .preview-title {
padding-left : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
.image-preview-line .preview-progress {
margin-left : 15px;
margin-top : 15px;
margin-bottom : 5px;
}
.image-preview-line .preview-file-size {
margin-left : 5px;
font-size : 12px;
margin-top : 15px;
margin-bottom : 5px;
}
.image-preview-line .label {
display: inline-block;
margin-bottom: 0px;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
font-size: 14px;
line-height: 1.42857;
user-select: none;
border-width: 1px;
border-style: solid;
/*border-color: transparent;*/
border-image: initial;
padding: 6px 12px;
border-radius: 4px;
border-color: #4cae4c;
}
// Add image form
$(function() {
"use strict";
var self = null;
var Website = {};
Website.Components = {};
Website.Components.FormImage = {
init : function(){
self.initFirstInput();
//self.initClosePopoverHandler();
//self.initClearPreviewHandler();
//self.initFileInputChangeHandler();
self.initAddClickHandler();
self.initUploadToolbar();
},
initUploadToolbar : function(){
// Create the preview image
$('#upload-toolbar').find("input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:100,
height:100
});
for (var i = 0; i < this.files.lenght; i++){
var file = this.files[i];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = self.onloadImage;
reader.readAsDataURL(file);
}
});
},
onloadImage : function(){
var img = $('<img/>', {
id: 'dynamic',
width:100,
height:100
});
var $element = $('.image-preview-line').last();
if ($element.hasClass('hidden')){
$element.removeClass('hidden');
} else {
$element = $element.clone();
$element.insertAfter($('.image-preview-line').last());
}
img.attr('src', e.target.result);
$element.find(".preview-box").html($(img)[0].outerHTML);
$element.find(".preview-title").text(file.name);
},
initFirstInput : function(){
var $firstInput = $('div.image-preview');
self.createPreviewPopover($firstInput);
self.createFileInputChangeHandler($firstInput);
self.createClosePopoverHandler();
self.createClearPreviewHandler($firstInput);
},
createPreviewPopover : function($element){
// Create the close button
var closebtn = $('<button/>', {
type:"button",
text: 'x',
/*id: 'close-preview',*/
style: 'font-size: initial;',
});
closebtn.attr("class","close-preview close pull-right");
// Set the popover default content
$element.popover({
trigger:'manual',
html:true,
title: "<strong>Prévisualisation</strong>"+$(closebtn)[0].outerHTML,
content: "Il n'y a pas d'image !",
placement:'bottom'
});
},
createFileInputChangeHandler : function($imagePreview){
// Create the preview image
$imagePreview.find(".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) {
$imagePreview.find(".image-preview-input-title").text("Modifier");
$imagePreview.find(".image-preview-clear").show();
$imagePreview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$imagePreview.attr("data-content",$(img)[0].outerHTML).popover("show");
// Hover befor close the preview
$imagePreview.hover(
function () {
$imagePreview.popover('show');
},
function () {
$imagePreview.popover('hide');
}
);
}
reader.readAsDataURL(file);
});
},
createClosePopoverHandler : function(){
$(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');
// }
// );
});
},
createClearPreviewHandler : function($imagePreview){
// Clear event
$imagePreview.find('.image-preview-clear').click(function(){
$imagePreview = $(this).closest('.image-preview');
if ($('.image-preview').size() > 1){
$imagePreview.remove();
} else {
self.clearPreview($imagePreview);
}
});
},
clearPreview : function($imagePreview){
$imagePreview.attr("data-content","").popover('hide');
$imagePreview.find('.image-preview-filename').val("");
$imagePreview.find('.image-preview-clear').hide();
$imagePreview.find('.image-preview-input input:file').val("");
//$imagePreview.find(".image-preview-input-title").text("Browse");
},
initAddClickHandler : function(){
$("#add-new-image").click(function(){
var $last = $("div.image-preview").last();
// Clone last element
var $clone = $last.clone();
// Clear before insert !
self.clearPreview($clone);
// Insert cloned element
$clone.insertAfter($last);
self.createPreviewPopover($clone);
self.createFileInputChangeHandler($clone);
//self.createClosePopoverHandler();
self.createClearPreviewHandler($clone);
});
}
};
self = Website.Components.FormImage;
Website.Components.FormImage.init();
});
