1

標準の 3 つの初期オプションよりも多くのファイルをアップロードしたい場合に備えて、ユーザーがリンクをクリックして追加のファイル アップロード入力フィールドを追加できるようにする UI フォームに取り組んでいます。

2つのこと：

  1. 私がやろうとしていることをもっと簡単に行う方法があるに違いないと思わずにはいられません。Javascript は私の得意分野の 1 つではありませんでした。
  2. 何らかの理由で、私が思いついた解決策; 追加できるフィールドは 1 つだけで、それ以上は機能しなくなります。リンクがクリックされるたびに別のフィールドが追加されるようにしたい。一度だけではありません。

私が取り組んできたコードの下; コメントを残したので、私がすでに試したことを確認できます。

jQuery:

    // add and remove addtional image upload inputs
    jQuery('#add_image_upload_field').click( function( e ) {

    e.preventDefault();

    var newInput = '<input type="file" class="fullwidth" name="upload_attachment[]" />';

    // jQuery(this).prev().append(newInput).slideDown('slow');
    // jQuery('#upload_image input').filter(':last').append(newInput).slideDown('slow');
    // jQuery('input[name="upload_attachment[]"]').filter(':last').append('newInput');
    // jQuery('input[name="upload_attachment[]"]').append('newInput');

var addLink = '<a href="#" id="add_image_upload_field">Add another image input field</a>';

jQuery(this).parent().append(newInput);
jQuery(this).remove();
jQuery('#upload_image').append(addLink);

});

HTML:

<!-- Upload a picture -->
<fieldset name="upload_image" id="upload_image">
    <label for="upload_image">Upload pictures:</label>
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />

    <a href="#" id="add_image_upload_field">Add another image input field</a>
    <!--<input type="button" id="add_image_upload_field" value="Add another image input field" />-->

</fieldset>

私はこれが何十ページにもわたって行われているのを見てきましたが、それを機能させることができません。どんな助けでも大歓迎です。

4

1 に答える 1