获取最近div的img src

Question

我的HTML是：-

<div class="mb10">
    <input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
</div>

我使用的是FileInput JS库，它初始化了一个file输入类型，为它添加了更多的HTML

JQuery

$("#input-upload-img1").fileinput();

初始化后，它会添加一些HTML

<div class="mb10">
    <span class="file-input file-input-new">
        <div class="file-preview "> <!-- This whole div is initially hidden, ie display:none-->
            <div class="close fileinput-remove text-right">×</div>
            <div class="file-preview-thumbnails"></div>
            <div class="clearfix"></div>
            <div class="file-preview-status text-center text-success"></div>
            <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
        </div>
        <div class="input-group ">
            <div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
                <div class="file-caption-name" style="width: 322.42px;"></div>
            </div>
            <div class="input-group-btn">
                <button class="btn btn-default fileinput-remove fileinput-remove-button" type="button"><!-- This button is initially hidden, ie display:none-->
                <i class="glyphicon glyphicon-ban-circle"></i>
                Remove
                </button>
                <div class="btn btn-primary btn-file">
                    <i class="glyphicon glyphicon-folder-open"></i>
                    Browse …
                    <input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
                </div>
            </div>
        </div>
    </span>
</div>

选择图像后，我得到以下HTML：-

    <div class="mb10">
        <span class="file-input">
            <div class="file-preview">
                <div class="close fileinput-remove text-right">×</div>
                <div class="file-preview-thumbnails">
                    <div id="preview-1469278203925-0" class="file-preview-frame">
<!--Check added image.-->
                        <img class="file-preview-image" style="width:auto;height:160px;" alt="IMG_20160606_210238.jpg" title="IMG_20160606_210238.jpg" src="blob:http://127.0.0.1:8000/27307c69-0599-4622-93f1-bf8ae6cc0e5c"> 
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="file-preview-status text-center text-success"></div>
                <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
            </div>
            <div class="input-group ">
                <div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
                    <div class="file-caption-name" style="width: 234.22px;" title="IMG_20160606_210238.jpg"></div>
                    <div class="input-group-btn">
                        <button class="btn btn-default fileinput-remove fileinput-remove-button" type="button">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        Remove
                        </button>
                        <div class="btn btn-primary btn-file">
                            <i class="glyphicon glyphicon-folder-open"></i>
                            Browse …
                            <input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
                        </div>
                    </div>
                </div>
        </span>
    </div>

注意添加的img标记。

现在，我正在编写一个JQuery，以便在选择文件时获得img标记的src。我该怎么做？

这是我的jQuery：-

$('.file').change(function(){
    var file = this.files[0];
    if (!file){
        return
    }
    var source_image = $(this).closest('div .file-preview-frame').find('.file-preview-image')
    alert(source_image.attr('src'))
}

它返回未定义。我想这是因为图像的动态添加。如何获取所选文件的图像源。？？

Answer 1

我认为您错误地理解了.closest的用法。它读取，对于集合中的每个元素，通过测试元素本身并向上遍历DOM树中的祖先，获得与选择器匹配的第一个元素。您可以看到，当.file元素发生更改时，它会遍历其祖先，其中span.file-input将是祖先之一，而div.file-preview-frame不是。所以你应该访问span.file-input，然后找到div.file-preview-frame。

你可能应该这么做。

$('.file').change(function(){
    var file = this.files[0];
    if (!file){
        return
    }
    var source_image = $(this).closest('span.file-input')
                       .find('div.file-preview-frame .file-preview-image')
    alert(source_image.attr('src'))
}

---

更新

我继续检查了plugin，发现了一些像下面这样的事件，你可以真正使用：

fileLoaded：

此事件是在预览中加载文件后触发的。可用的其他参数有：

• file：文件对象实例
• previewId：预览文件容器的标识符
• index：预览列表中加载文件的从零开始的顺序索引
• reader：FileReader实例（如果可用）

示例：

$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
    console.log("fileloaded");
});

---

fileSelect

在通过文件浏览按钮。这与变化略有不同事件，即使文件浏览也会触发对话框被取消。

示例：

$('#input-id').on('fileselect', function(event, numFiles, label) {
    console.log("fileselect");
});

我更喜欢fileLoaded事件，您可以使用如下：

$('.file').on('fileloaded', function(event, file, previewId, index, reader) {
  console.log(file);
  //file will have many details like lastModified, name, size, type etc.,
});