複数の入力タイプ= 1ページのファイル

Question

type="file"を使用して、自分のウェブページに異なるファイルをアップロードしようとしていますが、ユーザーが選択したファイルに関係なく、名前は対応するテキストボックスに表示されません。私はjQueryを使ってみましたが、ファイルがアップロードされた場所に関係なく、最初のテキストボックスのテキストだけが変更されるという点に固執しました。

$('input[name="file6"]').change(function() { 
 
    var fileName = $('input[name="file6"]').val(); 
 
    alert(fileName); 
 
    var subfileName = fileName.substring(12, fileName.length); 
 
    document.getElementById("upload6").value = subfileName;  
 
}); 
 

 
$('input[name="file7"]').change(function() { 
 
    var fileName = $('input[name="file7"]').val(); 
 
    var subfileName = fileName.substring(12, fileName.length); 
 
    document.getElementById("upload7").value = subfileName;  
 
});

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
 
<tr> 
 
    <td class="col-lg-4 col-md-4"><span class="red">*</span>&nbsp;abcxyz&nbsp;</td> 
 
    <td class="col-lg-7 col-md-7"><input type="text" id="upload5" readonly="" class="docs-upload-field"></td> 
 
    <td class="col-lg-1 col-md-1" style="padding-left: 5px;"> 
 
     <div class="image-upload"> 
 
      <label for="file-input"> 
 
       <img src="../images/trans.gif"/> 
 
      </label> 
 
      <input id="file-input" style="display: none;" type="file"/> 
 
     </div> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td class="col-lg-4 col-md-4">&nbsp;&nbsp;abcxyz&nbsp;</td> 
 
    <td class="col-lg-7 col-md-7"> 
 
     <input type="text" id="upload6" readonly="" class="docs-upload-field"> 
 
    </td> 
 
    <td class="col-lg-1 col-md-1" style="padding-left: 5px;"> 
 
     <div class="image-upload"> 
 
      <label for="file-input"> 
 
       <img src="../images/trans.gif"/> 
 
      </label> 
 
      <input id="file-input" style="display: none;" type="file"/> 
 
     </div> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td class="col-lg-4 col-md-4"><span class="red">*</span>&nbsp;abcxyz&nbsp;</td> 
 
    <td class="col-lg-7 col-md-7"><input type="text" id="upload7" readonly="" class="docs-upload-field"></td> 
 
    <td class="col-lg-1 col-md-1" style="padding-left: 5px;"> 
 
     <div class="image-upload"> 
 
      <label for="file-input"> 
 
       <img src="../images/trans.gif"/> 
 
      </label> 
 
      <input id="file-input" style="display: none;" type="file"/> 
 
     </div> 
 
    </td> 
 
</tr>

私もまだ最初の名前だけが変更さ

var filename=$(this).val() 

で

var fileName = $('input[name="file6"]').val(); 

を交換しようとしています。

Answer 1

まず、type="file"入力の重複IDを削除します。 IDはあなたのページで一意でなければなりません。 次に、入力ごとに1つのイベントを使用する必要はありません。すべてのイベントに一度にイベントを添付することができます。このよう

$('input[type="file"]').on('change', function() { 
     // your code 
    }); 

を使用すると、対応するテキストボックスにinput type="file"から参照する2つの方法があり、と述べました。 1つは、要素からデータを格納および取得できるjQueryの.data()を使用することです。

それぞれのtype="file"を参照するテキストボックスを設定する必要があります。たとえば、あなたが見たよう

<input data-textbox-id="upload5" type="file"/> 

と私たちのon('change'..)機能でデータatributeにアクセスするための...

$('input[type="file"]').on('change', function() { 

     var fileName = $(this).val(); 
     var textboxId = $(this).data('textbox-id'); 
     var subfileName = fileName.substring(12, fileName.length); 
     $("#" + textboxId).val(subfileName); 
    }); 

は、私はユニークですtextboxIdを保存し、その後、私が取得し、テキストボックスを更新するためにそれを使用しますjQueryでこのイベントはすべてinput type="file"に登録されました！

を使用すると、HTML要素に保管したくない場合は、あなたの変更機能からDOMをナビゲートすることで、Fiddle

他の方法で作業を参照してください。これは、DOM構造を変更した場合（たとえば、ある要素を別の場所に移動する場合）、ブレークするという問題があります。このアプローチでは、あなたはまったく.data()を使用していないだろう、と変更機能で、あなたのコードは、少なくとも私はあなたのコードで表示されるものと、あなたのタグが正しく閉じられていない。この

$(this).closest('tr').find('input[type="text"]'.val(fileName); 

ようなことはなくなります。だからこれまではうまくいきません。あなたはそれを修正する必要があります。

私は強くあなたが閉じていないタグを修正することをお勧めしますが、私は.data()を使用して、最初のアプローチを好むので、あなたはあなたがそれらに名前を付ける必要があるDOM構造