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]);  
    } 
};

Jquery最接近并且发现似乎不起作用

1 个答案: