Question About File Upload Order #157344

meongnyang2 · 2025-04-22T06:06:48Z

meongnyang2
Apr 22, 2025

Body

Hi, I’m a complete beginner, and I really need your help.
I’m working on a webpage that vertically merges image files. Users can either manually select images one by one or upload multiple files at once.
My image files are named like this: 4, 4(1), 4(2), 4(3), etc. I expect them to be merged in that order vertically. However, when I use the batch upload feature, the image named 4 always ends up at the end of the list, while the others are in the correct order.
I can’t figure out what’s wrong. It would be great if someone could point me in the right direction.
I’m using a single HTML file with embedded JavaScript.
Thank you in advance for your help!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>이미지 세로 합치기</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .section {
      margin-bottom: 30px;
    }
    .image-inputs input {
      display: block;
      margin-bottom: 10px;
    }
    .preview img {
      display: block;
      margin: 0 auto;
    }
    #result-container {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
  </style>
</head>
<body>
  <h1>이미지 세로 합치기</h1>

  <div class="section">
    <label for="mergeType">합치기 방식 선택:</label>
    <select id="mergeType" onchange="toggleMergeType()">
      <option value="ordered">순서대로 합치기</option>
      <option value="auto">파일명 숫자 기준 자동 합치기</option>
    </select>
  </div>

  <div class="section" id="width-control">
    <label>가로 사이즈 (100~1000px):</label>
    <input type="number" id="widthInput" min="100" max="1000" value="780" />
    <button onclick="applyWidth()">적용하기</button><br>
    <span style="font-size: 12px; color: #555;">적용하기 버튼을 꼭 눌러주세요!</span><br>
    <p>일반적인 상세페이지의 경우 가로 780 또는 860px을 사용하며, 썸네일은 800 또는 1000px을 사용합니다.<br>
    새로운 작업을 원하시면 새로고침(F5) 버튼을 눌러주세요.</p>
  </div>

  <div class="section">
    <label>저장 형식:</label>
    <select id="format">
      <option value="image/jpeg">JPEG</option>
      <option value="image/png">PNG</option>
    </select>
    <button onclick="mergeImages()">합치기</button>
  </div>

  <div id="result-container" style="display: none;">
    <span style="font-weight: bold; color: green;">이미지 생성되었습니다.</span>
    <a id="downloadLink" href="#" download="merged-image.jpg">다운로드</a>
  </div>

  <div class="section" id="orderedInputs">
    <label>순서대로 합치기 (최대 10개 파일까지):</label>
    <div class="image-inputs">
      <input type="file" id="file1" accept="image/png, image/jpeg" />
      <input type="file" id="file2" accept="image/png, image/jpeg" />
      <input type="file" id="file3" accept="image/png, image/jpeg" />
      <input type="file" id="file4" accept="image/png, image/jpeg" />
      <input type="file" id="file5" accept="image/png, image/jpeg" />
      <input type="file" id="file6" accept="image/png, image/jpeg" />
      <input type="file" id="file7" accept="image/png, image/jpeg" />
      <input type="file" id="file8" accept="image/png, image/jpeg" />
      <input type="file" id="file9" accept="image/png, image/jpeg" />
      <input type="file" id="file10" accept="image/png, image/jpeg" />
    </div>
  </div>

  <div class="section" id="autoInput" style="display: none;">
    <label>파일 업로드:</label>
    <input type="file" id="fileInput" multiple accept="image/png, image/jpeg" />
    <p>EX. 1.jpg, 2.jpg 또는 이미지1.png, 이미지2.png 와 같이 파일명에 숫자가 포함되어 있을 경우, 숫자 기준으로 오름차순 정렬 후 자동 합쳐집니다.</p>
  </div>

  <div class="preview" id="preview"></div>

  <script>
    let selectedWidth = 780;
    let sortedFiles = [];

    function applyWidth() {
      const value = parseInt(document.getElementById('widthInput').value);
      if (value >= 100 && value <= 1000) {
        selectedWidth = value;
        alert("가로 사이즈가 적용되었습니다.");
      } else {
        alert("100에서 1000 사이 값을 입력해주세요.");
      }
    }

    function toggleMergeType() {
      document.getElementById("orderedInputs").style.display = "none";
      document.getElementById("autoInput").style.display = "none";
      document.getElementById("preview").innerHTML = "";
      document.getElementById("result-container").style.display = "none";
      sortedFiles = [];

      const type = document.getElementById("mergeType").value;
      if (type === "ordered") {
        document.getElementById("orderedInputs").style.display = "block";
      } else {
        document.getElementById("autoInput").style.display = "block";
      }
    }

    function compareFileNames(a, b) {
      const parse = (name) => {
        const match = name.match(/^(\d+)(?:\((\d+)\))?/);
        const base = match ? parseInt(match[1], 10) : Infinity;
        const sub = match && match[2] ? parseInt(match[2], 10) : -1;
        return [base, sub];
      };
      const [baseA, subA] = parse(a.name);
      const [baseB, subB] = parse(b.name);
      if (baseA !== baseB) return baseA - baseB;
      return subA - subB;
    }

    document.getElementById("fileInput").addEventListener("change", function (e) {
      const files = Array.from(e.target.files);
      sortedFiles = files.sort(compareFileNames);
    });

    async function mergeImages() {
      const mergeType = document.getElementById("mergeType").value;
      const format = document.getElementById("format").value;
      const preview = document.getElementById("preview");
      preview.innerHTML = "";

      let files = [];

      if (mergeType === "ordered") {
        for (let i = 1; i <= 10; i++) {
          const input = document.getElementById(`file${i}`);
          if (input.files.length > 0) {
            files.push(input.files[0]);
          }
        }
      } else {
        files = sortedFiles;
      }

      if (files.length === 0) {
        alert("파일을 선택해주세요.");
        return;
      }

      const images = await Promise.all(
        files.map(file => {
          return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.src = URL.createObjectURL(file);
          });
        })
      );

      const totalHeight = images.reduce((sum, img) => sum + img.height * (selectedWidth / img.width), 0);
      const canvas = document.createElement("canvas");
      canvas.width = selectedWidth;
      canvas.height = totalHeight;
      const ctx = canvas.getContext("2d");

      let y = 0;
      for (const img of images) {
        const h = img.height * (selectedWidth / img.width);
        ctx.drawImage(img, 0, y, selectedWidth, h);
        y += h;
      }

      const mergedURL = canvas.toDataURL(format);
      const resultContainer = document.getElementById("result-container");
      const downloadLink = document.getElementById("downloadLink");

      resultContainer.style.display = "flex";
      downloadLink.href = mergedURL;
      downloadLink.download = "merged-image." + (format === "image/png" ? "png" : "jpg");

      // 미리보기에도 이미지 보여주기
      const previewImg = new Image();
      previewImg.src = mergedURL;
      previewImg.style.maxWidth = selectedWidth + "px";
      preview.appendChild(previewImg);
    }

    // 초기 설정
    toggleMergeType();
  </script>
</body>
</html>

### Guidelines

- [X] I have read and understood this category's [guidelines](https://github.com/orgs/community/discussions/51384) before making this post.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Question About File Upload Order #157344

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

GitHub Community

Question About File Upload Order #157344

Uh oh!

Uh oh!

meongnyang2 Apr 22, 2025

Body

Replies: 0 comments

meongnyang2
Apr 22, 2025