首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery ajaxFileUpload 報「is not a function」:路徑錯誤或庫被修改,Network 面板排查 404

     編輯:程式設計綜合問答

錯誤 $.ajaxFileUpload is not a function 表示 **jQuery 物件上找不到該方法**,常見原因:

  1. ajaxfileupload.js **載入失敗** (路徑錯誤、404、CORS)。
  2. 載入順序錯誤:ajaxfileupload.js 在 jquery.min.js **之前** 載入。
  3. 庫被二次修改,移除或重命名了 $.ajaxFileUpload 掛載點。

排查步驟

  1. 打開 Chrome DevTools → **Network** 面板,勾選 JS,重新整理頁面。
  2. 確認 jquery.min.js、**然後** ajaxfileupload.js 狀態碼 **200**,且 Initiator** 正確。
  3. 點開 ajaxfileupload.js 內容,搜尋 $.ajaxFileUpload 或 jQuery.ajaxFileUpload 是否存在。

修正範例

<script src="/js/jquery.min.js"></script>
<script src="/js/ajaxfileupload.js"></script> <!-- 必須在 jQuery 之後 -->
<script>
$('#uploadBtn').click(function() {
    $.ajaxFileUpload({   // 此時 $ 已掛載方法
        url: '/api/upload',
        fileElementId: 'fileInput',
        dataType: 'json',
        success: function(res) { console.log(res); }
    });
});
</script>

替代方案

現代專案建議改用 **原生 fetch + FormData** 或 **axios**,無需額外插件:

const form = new FormData();
form.append('file', document.getElementById('fileInput').files[0]);
fetch('/api/upload', { method: 'POST', body: form })
    .then(r => r.json()).then(console.log);

排查 Network 面板是定位「is not a function」類錯誤的黃金法則。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved