Upload & Crop profile image using jQuery
<p>i need to upload picture &amp; show it in div with specified size (height &amp; width) &amp; with possibility to crop it, i already prepare the div (class ".profile-img") that i want the picture to be shown, i think its a favour to get somehelp with this, i really need it to be fast as u can..</p>

<p>in this sample i use boostrap, jquery, css &amp; html</p>

<p>thanks alot!!</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
        }
    );    
});

$(function() {
    // Create the close button
    var closebtn = $('&lt;button/&gt;', {
        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: "&lt;strong&gt;Preview&lt;/strong&gt;"+$(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 = $('&lt;img/&gt;', {
            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);
    });  
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}

.profile-img {
width:180px;
height:180px;
border:1px solid #eee;
margin:20px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
&lt;div class="container"&gt;
    &lt;div class="row"&gt; 
      &lt;!-----------------&gt;
         &lt;div class="profile-img"&gt;profile img here!!&lt;/div&gt;
      &lt;!-----------------&gt;
        &lt;div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"&gt;  
            &lt;!-- image-preview-filename input [CUT FROM HERE]--&gt;
            &lt;div class="input-group image-preview"&gt;
                &lt;input type="text" class="form-control image-preview-filename" disabled="disabled"&gt; &lt;!-- don't give a name === doesn't send on POST/GET --&gt;
                &lt;span class="input-group-btn"&gt;
                    &lt;!-- image-preview-clear button --&gt;
                    &lt;button type="button" class="btn btn-default image-preview-clear" style="display:none;"&gt;
                        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Clear
                    &lt;/button&gt;
                    &lt;!-- image-preview-input --&gt;
                    &lt;div class="btn btn-default image-preview-input"&gt;
                        &lt;span class="glyphicon glyphicon-folder-open"&gt;&lt;/span&gt;
                        &lt;span class="image-preview-input-title"&gt;Browse&lt;/span&gt;
                        &lt;input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/&gt; &lt;!-- rename it --&gt;
                    &lt;/div&gt;
                &lt;/span&gt;
            &lt;/div&gt;&lt;!-- /input-group image-preview [TO HERE]--&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>