Java Web 圖片上傳後動態設為背景圖片實作

需求場景

使用者上傳圖片後，需即時將該圖片作為指定 <div>（如 id="title"）的背景圖顯示，無需刷新頁面。

核心步驟

1. 後端接收上傳：Servlet/Controller 儲存檔案，回傳可訪問的 URL（如 /uploads/abc.jpg）。
2. 前端 AJAX 上傳：使用 FormData + fetch/axios 非同步上傳，拿到回傳 URL。
3. 動態修改樣式：JS 拿到 URL 後，直接操作 DOM 的 style.backgroundImage。

前端代碼範例

// 上傳成功後的回調
function onUploadSuccess(imageUrl) {
    const titleDiv = document.getElementById('title');
    titleDiv.style.backgroundImage = `url("${imageUrl}")`;
    titleDiv.style.backgroundSize = 'cover';
    titleDiv.style.backgroundPosition = 'center';
}

完整 HTML 結構

<div id="title" style="width:300px;height:150px;border:1px solid #ccc;">
  標題區塊
</div>
<input type="file" id="imgInput" accept="image/*">
<button onclick="uploadImg()">上傳並設為背景</button>

<script>
function uploadImg() {
  const file = document.getElementById('imgInput').files[0];
  if (!file) return alert('請選擇圖片');
  const formData = new FormData();
  formData.append('file', file);
  fetch('/api/upload', { method: 'POST', body: formData })
    .then(r => r.json())
    .then(data => onUploadSuccess(data.url))
    .catch(err => console.error(err));
}
</script>

注意事項

• 後端需設定靜態資源映射（如 Spring MVC resource-handler），確保上傳目錄可直接 URL 訪問。
• 生產環境建議加入圖片壓縮、格式驗證、防盜鏈等安全措施。