JQuery 中有很多實用的插件，其中之一就是鼠標拖放上傳插件。這個插件可以使用戶通過簡單的拖動文件到指定區域就能實現文件上傳，在開發中非常方便。

首先，在頁面中引入 JQuery 和相關的插件文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<link  rel="stylesheet" />

然后，在 HTML 中創建一個用來放置上傳區域的 div：

<div id="dropArea"></div>

接下來，在 JavaScript 中初始化上傳區域：

$(function(){
var dropArea = $("#dropArea");
//拖拽進入事件
dropArea.on("dragenter", function(event) {
event.preventDefault();
dropArea.addClass("over");
});
//拖拽離開事件
dropArea.on("dragleave", function(event) {
event.preventDefault();
dropArea.removeClass("over");
});
//拖拽放下事件
dropArea.on("drop", function(event) {
event.preventDefault();
dropArea.removeClass("over");
//獲取上傳的文件
var files = event.originalEvent.dataTransfer.files;
console.log(files);
//執行上傳
//清空上傳的文件
dropArea.html("");
});
});

在此代碼中，我們使用 JQuery 的 on() 方法監聽了 dragenter、dragleave 和 drop 事件，并在函數中添加了相應的操作。其中，dragenter 和 dragleave 事件用來控制鼠標在上傳區域內的樣式，drop 事件中的代碼用來獲取上傳的文件并執行上傳操作。

最后，我們還可以添加一些樣式美化我們的上傳區域：

#dropArea {
border: 3px dashed #ccc;
box-sizing: border-box;
height: 200px;
margin: 20px auto;
position: relative;
width: 200px;
}
#dropArea.over {
border-color: #333;
}

通過以上操作，我們就可以實現鼠標拖放上傳了。