jQuery change() 事件全攻略：觸發時機、文件上傳實戰與常見誤區

change() 事件基礎

change 事件在元素值發生改變並失去焦點時觸發，適用於：

• <input type="text">、<textarea>：失去焦點且值變化
• <select>：選擇選項時立即觸發
• <input type="checkbox/radio">：狀態改變時觸發
• <input type="file">：選擇文件後觸發（值從空變為文件路徑）

語法

// 觸發事件
$(selector).change();

// 綁定處理器
$(selector).change(function(event) { ... });

實戰場景：按鈕觸發文件選擇 + 自動上傳

HTML

<form id="uploadForm" action="/finance/upload" method="post" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="file" style="display:none;" />
  <button type="button" class="btn btn-primary" id="btnUpload">批量導入</button>
</form>

JavaScript (jQuery + jquery.form.js ajaxSubmit)

$(function() {
  // 1. 按鈕點擊觸發隱藏 file 控件
  $('#btnUpload').click(function() { $('#fileInput').click(); });

  // 2. 文件選擇後自動提交表單
  $('#fileInput').change(function() {
    var fileName = $(this).val();
    if (!fileName) return; // 用戶取消選擇

    alert("選中文件：" + fileName); // 調試用

    $('#uploadForm').ajaxSubmit({
      success: function(response) {
        var json = JSON.parse(response); // 假設後端返回 JSON
        if (json.status === 1) {
          alert("導入成功");
          dataTable.ajax.reload(); // 刷新表格
        } else {
          alert("失敗：" + json.message);
        }
      },
      error: function() { alert("網絡異常"); }
    });

    // 3. 重置 file 控件，允許重複選擇同一文件
    $(this).val("");
  });
});

關鍵點解析

1. 隱藏 file 控件 + 按鈕觸發：美化 UI，統一風格。
2. change 事件自動提交：用戶選完文件即上傳，無需二次點擊「提交」按鈕，體驗更流暢。
3. $(this).val("") 重置：瀏覽器安全機制禁止 JS 直接設置 file 值，但置空允許，解決「連續選擇同一文件不觸發 change」問題。
4. ajaxSubmit：需引入 jquery.form.js，自動處理 multipart/form-data 異步提交。

常見誤區與避坑

進階：原生 JS 替代方案

document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (!file) return;
  var formData = new FormData();
  formData.append('file', file);
  fetch('/finance/upload', { method: 'POST', body: formData })
    .then(r => r.json())
    .then(json => { /* 處理結果 */ });
  e.target.value = ""; // 重置
});

總結

change() 是表單交互核心事件，掌握其觸發時機（失焦/選擇）、file 控件特殊行為、重置技巧、動態綁定，能構建流暢的文件上傳、下拉聯動、表單驗證等體驗。