ファイルをアップロードするときにファイル名をラベルに適用する

Question

ファイルアップローダー入力フィールドを非表示にしました。私は、ファイルをアップロードするためのクリック可能な要素としてラベルを使用しています。ここをクリックjsFiddle

ラベルのテキストを変更するためのJS回避策を追加しました。ファイルを選択すると、「ファイルをアップロードする」というテキストが実際のファイル名に置き換えられます。

私の問題は、私のコードが複数のファイルアップローダで動作するようになっていることです。

HTML

<p class="hide_this"><span class="wpcf7-form-control-wrap file-02"><input type="file" name="file-02" size="40" class="wpcf7-form-control wpcf7-file" id="file-01" aria-invalid="false"></span><label for="file-01"><span>Upload a file</span></label></p> 

<p class="hide_this"><span class="wpcf7-form-control-wrap file-03"><input type="file" name="file-03" size="40" class="wpcf7-form-control wpcf7-file" id="file-02" aria-invalid="false"></span><label for="file-02"><span>Upload a file</span></label></p> 

<p class="hide_this"><span class="wpcf7-form-control-wrap file-04"><input type="file" name="file-04" size="40" class="wpcf7-form-control wpcf7-file" id="file-03" aria-invalid="false"></span><label for="file-03"><span>Upload a file</span></label></p> 

JS

$('input[type=file]').change(function(){ 
    var filename = $(this).val().split('\\').pop(); 
    var idname = $(this).attr('id'); 
    $('.'+idname).next().find('span').html(filename); 
}); 

Answer 1

これがあなたにとってうまくいかない理由はidの不一致があります。 <input>のidは、関連する<span>のidと一致させるだけです。ここで

が更新フィドルです： https://jsfiddle.net/m7eqj9ku/1/

---

注：外部LIBSに

Answer 2

を：私は上をクリックし、ファイルアップローダー以下のコード、どんなにでは、ファイル名は、最初のファイルアップロードフィールドは常に移入します試してみてください$('label[for="'+idname+'"]').find('span').html(filename);