自定义上传按钮：用Button包裹本地化文件输入的问题咨询

Great question! Let's break down why your current setup is causing issues and fix it up properly.

First, let's identify the root problems with your current code:

• Nesting a <label> inside a <button> violates HTML semantic rules—labels shouldn't contain interactive elements like buttons. This creates conflicting click behaviors that confuse browsers, leading to unexpected actions like form submissions or blank pages.
• By default, <button> elements inside forms have a type="submit" behavior. When you select a file, this default submit action gets triggered accidentally, causing the page to redirect or submit prematurely.

Here are two solid solutions that work seamlessly with CSS button libraries:

Solution 1: Fix Structure & Block Default Submit Behavior #

If you want to keep using label-input association, adjust the structure to avoid nesting and explicitly set the button's type to prevent submission:

<style>
 .ui-widget-header, .ui-state-default, .ui-button {
 background: #b9cd6d;
 border: 1px solid #b9cd6d;
 color: #FFFFFF;
 font-weight: bold;
 }

 input[type="file"] {
 display: none;
 }
</style>
<div class="form-group">
  <!-- Explicitly set button type to avoid default submission -->
  <button type="button" class="btn-sm btn btn-default custom-file-upload">
    <span th:text="#{addYourEDI}"></span>
    <input type="file" name="ediFile" multiple="multiple" accept=".pdf,.xls,.xlsx,.csv,.zip" id="ediFile" onchange="ediFileChange()"/>
  </button>
</div>

Add a simple click handler to trigger the file input:

document.querySelector('.custom-file-upload').addEventListener('click', function(e) {
  e.preventDefault();
  this.querySelector('input[type="file"]').click();
});

Solution 2: Separate Button & File Input (Highly Recommended) #

This approach is cleaner, avoids semantic conflicts entirely, and lets you use any CSS button library's styles without interference:

<style>
 .ui-widget-header, .ui-state-default, .ui-button {
 background: #b9cd6d;
 border: 1px solid #b9cd6d;
 color: #FFFFFF;
 font-weight: bold;
 }

 input[type="file"] {
 display: none;
 }
</style>
<div class="form-group">
  <!-- Use your CSS button library classes directly -->
  <button type="button" class="btn-sm btn btn-default" id="ediUploadBtn">
    <span th:text="#{addYourEDI}"></span>
  </button>
  <!-- Hidden file input -->
  <input type="file" name="ediFile" multiple="multiple" accept=".pdf,.xls,.xlsx,.csv,.zip" id="ediFile" onchange="ediFileChange()"/>
</div>

Add JavaScript to connect the button to the file input:

document.getElementById('ediUploadBtn').addEventListener('click', function() {
  document.getElementById('ediFile').click();
});

Why This Works Better: #

1. It follows HTML semantics perfectly, eliminating browser behavior inconsistencies.
2. Button styles from any library will render correctly without being broken by nested elements.
3. The default submit behavior is completely avoided, so you won't get blank pages or premature form submissions after selecting a file.

One quick note: Your original input used visibility: hidden; position: absolute;—switching to display: none; is more efficient, as it removes the element from the page layout entirely rather than just hiding it.

To wrap up: Your goal is absolutely feasible—you just needed to fix structural conflicts and handle default button behavior. Either of these solutions will get you up and running smoothly with your CSS button library.

内容的提问来源于stack exchange，提问作者cp.