jQuery最近和查找似乎不起作用

Question

這些是我的代碼。 我無法使我的jquery代碼正常工作。

HTML：

<div class="col-lg-6 col-md-6 col-sm-6"> 
  <input name="hImage" class="form-control"  type="file" id="headerImage" required> 
  <img src="" id="img_url" alt="your image" class="img-responsive"> 
</div>

JQUERY：

function readURL(e){
    if (this.files && this.files[0]){
        var reader = new FileReader();
        $(reader).load(function(e) {
            imagePrev = e.target.result;
            var imgElement = $(this).closest('div').find('img');
            imgElement.attr('src', imagePrev);
        });
        reader.readAsDataURL(this.files[0]);   
};

我用以下代碼觸發該函數：

$("#headerImage").change(readURL);

imagePrev是base64數據。 哪個有效，因為當我嘗試

$("#img_url").attr('src', imagePrev);

圖像被加載。

但是我想使用.closest或.find或.siblings或任何必需的代碼，以便我可以找到最近的img標記並替換其src attr。

Answer 1

問題在於this變量，一旦執行進入$(reader).load() ， this變量的值就會更改。

使用以下內容。

function readURL(e){
    $this = $(this);
    if (this.files && this.files[0]){
        var reader = new FileReader();
        $(reader).load(function(e) {
            imagePrev = e.target.result;
            var imgElement = $this.siblings('img');
            imgElement.attr('src', imagePrev);
        });
        reader.readAsDataURL($this[0].files[0]);  
    } 
};