获取的img最接近DIV

Question

我的HTML是SRC： -

<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., 
});