Question

我有三个具有相同名称的文本输入字段和三个用于获取文件名的文本字段。我正在尝试获取三个文件名

function getFileData(myFile){
  var file = myFile.files[0];
  var filename  =  [file.name];

  $("input:text").val(filename);
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" id="file_name_helper" name="file_name_helper[]"/>

<input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" id="file_name_helper" name="file_name_helper[]" />

<input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);"/>
<input type="text" id="file_name_helper" name="file_name_helper[]" />

上面的代码将所有字段设置为文件名。我只想设置与文件输入字段匹配的字段。

是否有jQuery选择器来做到这一点？

Answer 1

按照您的HTML立场，您可以像这样使用.next()：

$(myFile).next('input[type=text]').val(filename);

请注意：属性id在文档中必须是唯一的。如果要引用具有相同属性的多个元素，请改用class。

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];

  $(myFile).next('input[type=text]').val(filename);
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" class="file_name_helper" name="file_name_helper[]"/>

<input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" class="file_name_helper" name="file_name_helper[]" />

<input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);"/>
<input type="text" class="file_name_helper" name="file_name_helper[]" />

Answer 2

    function getFileData(myFile){
           var file = myFile.files[0];
           var filename  =  [file.name];

           $(myFile).next().val(filename);
         }

    <!DOCTYPE html>
    <html>
    <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
    </script>
    <meta charset=utf-8 />
    </head>
    <body>
      <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
      <input type="text" id="file_name_helper" name="file_name_helper[]"/>

      <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
      <input type="text" id="file_name_helper" name="file_name_helper[]" />

    <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);"/>
    <input type="text" id="file_name_helper" name="file_name_helper[]" />




    </body>
    </html>

Answer 3

在单击的输入上，使用jquery的next函数查找下一个输入元素，并填充文本输入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<meta charset=utf-8 />
</head>
<body>
  <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" id="file_name_helper" name="file_name_helper[]"/>

  <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" id="file_name_helper" name="file_name_helper[]" />

<input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);"/>
<input type="text" id="file_name_helper" name="file_name_helper[]" />


<script>
   function getFileData(myFile){
   var file = myFile.files[0];
   var filename  =  [file.name];

   $(myFile).next('input').val(filename);
   }
</script>

</body>
</html>

jQuery Selector将值设置为具有相同名称的特定文本输入字段

3 个答案: