基于PHP和jQuery的多图上传：将文件选择框改为横向排列

Hey there! Let's get those file upload inputs lined up horizontally instead of stacking vertically. Here's a straightforward way to adjust your code:

Step 1: Update the HTML Structure #

First, we'll wrap the file inputs in a container that we can style for horizontal layout, and remove the <br/> tags that force vertical spacing:

<form enctype="multipart/form-data" action="" method="post">
  <div class="file-container">
    <div class="file-item">
      <input name="file[]" type="file" id="file"/>
    </div>
  </div>
  <br/>
  <input type="button" id="add_more" class="upload" value="Add More Files"/>
</form>

Step 2: Adjust the jQuery Code #

We'll modify the code that adds new inputs to append them to our container, ditch the extra line breaks, and give each input a unique ID to avoid DOM conflicts:

// Make sure to initialize the max variable (I assume you had this somewhere already!)
let max = 1;

$('#add_more').click(function() {
  if (max < 2) {
    $('.file-container').append(
      $("<div/>", {class: 'file-item'}).fadeIn('slow').append(
        $("<input/>", {name: 'file[]', type: 'file', id: `file${max}`})
      )
    );
    max++;
  }
});

Step 3: Add CSS for Horizontal Layout #

We'll use flexbox to make the container's children line up horizontally, and add some spacing between inputs:

/* Keep your existing CSS styles, then add these */
.file-container {
  display: flex;
  gap: 15px; /* Adjust this value to control spacing between inputs */
  align-items: center;
  flex-wrap: wrap; /* Optional: Lets inputs wrap to a new line if there's not enough space */
}

.file-item {
  display: flex;
  align-items: center;
}

/* Update the file input selector to match our new unique IDs */
#file, #file1 {
  color:green;
  padding:5px;
  border:1px dashed #123456;
  background-color: #f9ffe5;
}

What Changed? #

• Flexbox Layout: The .file-container uses display: flex to arrange its child elements horizontally, which is the cleanest modern way to handle this.
• Removed Line Breaks: We got rid of the <br/> tags that were forcing each input onto a new line.
• Unique IDs: Each new input gets a unique ID (file, file1) to prevent duplicate ID issues in the DOM.
• Controlled Spacing: The gap property in .file-container lets you easily adjust how much space is between each input without messy margins.

内容的提问来源于stack exchange，提问作者Mr Ibra