jQuery OCUpload 是一款基于 jQuery 的文件上傳插件,能夠使用 AJAX 方式上傳文件。
使用 jQuery OCUpload,需要先引入 jQuery 和 OCUpload 相關(guān)的 CSS 和 JS 文件。引入代碼如下:
<link rel="stylesheet" href="jquery.ocupload-1.1.2.css" /> <script src="jquery-3.4.1.min.js"></script> <script src="jquery.ocupload-1.1.2.min.js"></script>
接下來,定義一個包含 file input 和上傳按鈕的 HTML 代碼:
<div> <input type="file" name="myfile" id="myFile" /> <button id="uploadBtn">上傳</button> </div>
然后,在 JavaScript 代碼中使用 OCUpload 插件上傳文件:
$("#uploadBtn").ocupload({ url: "/file/upload", type: "POST", dataType: "json", fileChange: function (filename, ext) { console.log("文件名: " + filename + ", 擴(kuò)展名: " + ext); }, onSuccess: function (data) { console.log("上傳成功: " + data.url); }, onFailure: function (errMsg) { console.log("上傳失敗: " + errMsg); } });
這個例子定義了上傳文件的 URL 地址、請求類型、數(shù)據(jù)返回類型,還綁定了文件選擇和上傳成功、失敗的事件處理函數(shù)。使用相應(yīng)的函數(shù)可以獲取到處理結(jié)果,從而可以在前端進(jìn)行相應(yīng)的處理。