Question

我正在尝试让用户使用type="file"在我的网页上上传不同的文件，但问题是无论用户选择哪个文件，名称都不会显示在相应的文本框中。我尝试使用jQuery，但无论文件上传的位置如何，只有第一个文本框中的文字发生变化。

＆＃13;

 $('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;      
});

＆＃13;

<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>

＆＃13;

我试过替换

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

带

var filename=$(this).val()

但也只是名字改变了。

Answer 1

首先，删除type="file"输入中的重复ID。 Ids在您的页面中必须是唯一的。然后，您不需要为每个输入使用一个事件，您可以一次将事件附加到所有输入。喜欢这个

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

话虽如此，您有两种方法可以从input type="file"引用到对应的文本框。一种是使用jQuery中的.data()，它允许您存储和检索元素中的数据。

您必须在每个type="file"中设置引用的文本框。例如

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

并访问我们on('change'..)函数中的数据属性..

$('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"注册！

见工作Fiddle

另一方面，如果您不想将其存储在HTML元素中，则可以从更改功能导航DOM。这有一个问题，如果你改变dom结构它会破坏（例如将一个元素移动到另一个地方）。使用这种方法，您根本不会使用.data()，并且您在更改函数中的代码将是这样的

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

但是，至少从我在代码中看到的情况来看，您的代码未正确关闭。所以这到目前为止还不行。你必须修理它。

虽然我强烈建议您修复未关闭的标签，但我更喜欢使用.data()的第一种方法，因此您不依赖于DOM结构

多页输入类型=单页文件

1 个答案: