Question

我有2个具有相同名称的输入字段 - 这是因为项目的业务逻辑。

他们看起来像那样：

<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />
<input type="file" name="director_front_passport[]" class="app-file" />

我需要在更改事件后输入字段后附加图像名称。但是这样，如何区分这两个输入？

我想尝试通过id attr区分它们，但我有clone按钮来添加更多字段，我认为这不会对更改事件有用。

更新：我的on change事件代码如下：

var inputs = document.querySelectorAll( '.app-file' );
Array.prototype.forEach.call( inputs, function( input )
 {
  input.addEventListener( 'change', function( e )
   {
    //my code for displaying image
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我使用$(this)更新了我的代码以查找更改的输入，我的代码看起来是：

var inputs = document.querySelectorAll( '.app-file' );

        Array.prototype.forEach.call( inputs, function( input )
        {
           input.addEventListener( 'change', function( e )
            {
              var changed = $(this);
                var label	 = changed.next(),
                    labelVal = label.innerHTML,
                    divName = label.next();
               fileName = e.target.value.split('\\').pop();
              divName.html(fileName);
             
             });
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />
<input type="file" name="director_front_passport[]" class="app-file" />

Answer 1

您可以在事件处理程序中使用this关键字来标识引发事件的元素。试试这个：

＆＃13;

$('.app-file').change(function() {
  $(this).after('<div>' + this.files[0].name + '</div>');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />
<input type="file" name="director_front_passport[]" class="app-file" />

＆＃13;

在你的第二个例子中，按照你的方式拨打forEach有点奇怪。您只需在forEach返回的nodeList上调用querySelectorAll，如下所示：

document.querySelectorAll('.app-file').forEach(function(input) {
    input.addEventListener('change', function(e) {
        // my code for displaying image
    })
}

两个具有相同名称的输入字段 - 在更改事件上

1 个答案: