title: Upload & Crop profile image using jQuery
body: <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>