基于ID操作文件输入组件问题：多输入场景功能失效

Hey there! Let's sort out your multi-input file plugin issue. The core problem with your current code is that it's not treating each input box as an independent instance, and there are a few syntax/context mistakes that break the ID-based logic. Here's the fixed version with explanations:

Key Issues in the Original Code #

• The inputId variable is an array of IDs, but buttonInspec expects a single ID—this leads to invalid selector syntax like $("#fileInput0,fileInput1").
• element.next(element) is incorrect; we need to target the sibling .input-file element relative to the hidden input.
• Event bindings weren't scoped to individual input instances, causing cross-interference between multiple inputs.

Fixed Code #

HTML (unchanged, included for context)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="col-md-8 col-md-offset-2">
<h3>Example</h3>
<form method="POST" action="#" enctype="multipart/form-data">
<!-- COMPONENT START -->
<div class="form-group">
<div class="input-group input-file" name="Fichier1">
<input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group input-file" name="Fichier2">
<input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<!-- COMPONENT END -->
</form>
</div>
</div>

JavaScript (Fixed Version)

function bs_input_file() { 
  // Iterate over each .input-file instance to handle them individually
  $(".input-file").each(function() {
    const $inputContainer = $(this);
    const $textInput = $inputContainer.find('input[type="text"]');
    const inputId = $textInput.attr('id');

    // Initialize reset button state
    const $resetBtn = $inputContainer.find("button.btn-reset");
    $resetBtn.addClass("hidden");

    // Bind events to the hidden file input for this instance
    function bindEvents($hiddenInput) {
      $hiddenInput.on("change", function() {
        // Update visible text input with selected filename
        $textInput.val($(this).val().split('\\').pop());
        // Show reset button when file is selected
        $resetBtn.removeClass("hidden");
      });

      // Trigger hidden input click when "Search" button is clicked
      $inputContainer.find("button.btn-choose").click(function() {
        $hiddenInput.click();
      });

      // Reset both hidden input and visible text input
      $resetBtn.click(function() {
        $hiddenInput.val(null);
        $textInput.val('');
        $resetBtn.addClass("hidden");
      });

      // Allow clicking the text input to trigger file selection
      $textInput.css("cursor", "pointer").mousedown(function() {
        $hiddenInput.click();
        return false;
      });
    }

    // Create hidden file input if it doesn't exist
    if (!$inputContainer.prev().hasClass('input-ghost')) {
      const $hiddenInput = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>");
      $hiddenInput.attr("name", $inputContainer.attr("name"));
      $inputContainer.before($hiddenInput);
      bindEvents($hiddenInput);
    } else {
      // Re-bind events if hidden input already exists
      const $existingHidden = $inputContainer.prev('.input-ghost');
      bindEvents($existingHidden);
    }
  });
} 

// Initialize the plugin
bs_input_file();

What Changed? #

1. Instance-based Handling: We use $(".input-file").each() to loop through every input container, ensuring each one is handled independently.
2. Correct ID Targeting: All operations are scoped to the current input container using $inputContainer, so we never accidentally target other inputs.
3. Fixed Hidden Input Logic: The hidden file input is created per instance, and event bindings are tied directly to that instance's elements—no more cross-talk between inputs.
4. Proper Reset Button State: The reset button starts hidden, shows when a file is selected, and hides again after a reset.

This version will work seamlessly with multiple input boxes on the same page, with each one operating independently without affecting others.

内容的提问来源于stack exchange，提问作者Douglas Teles