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