使用jQuery上傳和裁剪配置文件圖像

Question

我需要上傳圖片&用div指定大小（高度爲&寬度）&可能會裁剪它，我已經準備好div（類「.profile-img」）我想要顯示的圖片，我認爲它的忙讓somehelp這個問題，我真的需要它要快如u可以..

此示例，我使用的自舉，在jQuery的，CSS & HTML

非常感謝！

$(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 = $('<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); 
 
    }); 
 
});

.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] { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 20px; 
 
\t cursor: pointer; 
 
\t opacity: 0; 
 
\t filter: alpha(opacity=0); 
 
} 
 
.image-preview-input-title { 
 
    margin-left:2px; 
 
} 
 

 
.profile-img { 
 
width:180px; 
 
height:180px; 
 
border:1px solid #eee; 
 
margin:20px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <!-----------------> 
 
     <div class="profile-img">profile img here!!</div> 
 
     <!-----------------> 
 
     <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> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

這種嘗試下面的代碼的上傳圖片和預覽相同。

function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 

 
    reader.onload = function (e) { 
 
     $('.profile-img').attr('src', e.target.result); 
 
    } 
 

 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
} 
 

 
$("#inputFile").change(function() { 
 
    readURL(this); 
 
});

.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] { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 20px; 
 
\t cursor: pointer; 
 
\t opacity: 0; 
 
\t filter: alpha(opacity=0); 
 
} 
 
.image-preview-input-title { 
 
    margin-left:2px; 
 
} 
 

 
.profile-img { 
 
width:180px; 
 
height:180px; 
 
border:1px solid #eee; 
 
margin:20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
    <img class="profile-img" src="" alt="your image" /> 
 
     <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> 
 
     <div class="input-group image-preview"> 
 
      <input type="text" class="form-control image-preview-filename" disabled="disabled"> 
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> 
 
       <span class="glyphicon glyphicon-remove"></span> Clear 
 
      </button> 
 
      <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" id="inputFile"/> 
 
      </div> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>