取得IMG最も近いのdiv

Question

の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> 

私はfile入力タイプを初期化することに多くのHTMLを追加するFileInput JSライブラリを、使用しています。

jQueryの

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

初期化した後、それはそれにいくつかの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タグ - ：

<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を取得します。

今、ファイルを選択するときに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')) 
} 

- ：

は、ここに私のjQueryのです。私はそのイメージの動的な追加のためだと思います。選択したファイルのイメージソースを取得するにはどうすればいいですか？

Answer 1

.closestの使用法を間違って理解していると思います。これは、 となります。セット内の各要素について、要素自体をテストし、DOMツリーの先祖を突き抜けてセレクタに一致する最初の要素を取得します。あなたは、 .file要素の変更が発生すると、その先祖を通過し、 span.file-inputが先祖の1つになり、 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をチェックするようになったなど、あなたが本当に使用することができ、以下のいくつかのイベントが見つかりました：

を0：

このイベントは、ファイルがプレビューに読み込まれた後にトリガーされます。利用可能な 追加のパラメータは、次のとおり

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