时间戳

首页 > 解决方案 > 如何在脚本中使用多个输入

javascript - 如何在脚本中使用多个输入

问题描述

我正在使用引导程序的站点上工作，其中输入文件未显示所选文件名。所以我有一个做同样的脚本。

但是这里它不适用于两个输入，所以如何使用相同的两个输入（两个文件上传）。

具有相同脚本的多个输入

基本上，我想对两个输入使用相同的脚本。我希望你得到我想要的。

我不知道如何使用 ID 或其他方式将两个输入分开。

$(document).ready(function() {
  $('input[type="file"]').change(function(e) {
    var display = e.target.files[0].name;
    $("h5").text(display + ' is the selected file.');

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

标签： javascriptjqueryfile-upload

解决方案

选择h5输入后的，而不是所有h5元素。

$(document).ready(function() {
  $('input[type="file"]').change(function(e) {
    var display = this.files[0].name;
    $(this).next("h5").text(display + ' is the selected file.');

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

推荐阅读