Javascript 获取最近div的img src

我的HTML是：-

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

初始化后，它会向其中添加一些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>

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

我认为您错误理解了的用法。对于集合中的每个元素，它通过测试元素本身并在

DOM

树中向上遍历其祖先来读取与选择器匹配的第一个元素。您可以看到，当

.file

元素发生更改时，它将遍历其祖先，其中

span中的文件输入将是祖先之一，而
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'))
}



更新

我接着检查了
插件
，发现下面这样的事件很少有您真正可以使用的：

：

在预览中加载文件后会触发此事件。
其他可用参数包括：


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

示例：

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



通过在文件输入中选择文件后，将触发此事件
“文件浏览”按钮。这与更改略有不同
事件，即即使文件浏览也会触发此事件
对话框被取消

例如：

$('#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.,
});

仍然返回
未定义的
。这是因为元素的动态生成吗？否。每个属性返回
未定义的
，即使使用
$（source\u image）.attr（'attr\u name'）还有什么我可以尝试拍摄的吗？它会返回一个对象。我应该具体研究什么？
$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
    console.log("fileloaded");
});

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

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