今天寫到了上傳文件部分，記錄一下。

前端使用了dropzone.js(用于實現(xiàn)文件上傳的JS庫)，并對此文件進行了細微修改。

說一下思路吧：

首先界面長這樣：

點擊上傳文件，需要彈出一個對話框，對話框中有支持拖拽文件的文件選擇框。

注意，此時上傳按鈕是禁用的。

選擇完成后，會有上傳進度條。這里為了看到進度條，我選擇上傳一個比較大的文件。

度條走滿之后才可以點擊上傳按鈕。點擊上傳刷新界面：

可以看到上傳成功了。

接下來說一下實現(xiàn)吧:

一、dropzone的文件上傳表單

×Close

選擇您需要上傳的文件，可以拖拽

關閉 上傳

核心就是引入dropzone.js后。添加一個表單標簽，設置class="dropzone"。然后dropzone會自動檢測到，并做大量的工作。

這里我修改了一下dropzone.js的幾行代碼。來滿足我的需求。

主要是processing和success兩個事件。processing表示正在上傳的事件，success表示上傳成功。可以看到這里當在上傳的時候，我讓按鈕變成不能點擊的狀態(tài)。上傳成功后，根據(jù)服務器返回的消息Message，把按鈕變回可點擊狀態(tài)，然后添加點擊函數(shù)，讓界面重新加載。

二、SpringMVC后臺實現(xiàn)

有些請求參數(shù)是我業(yè)務需求，不用在意，主要是看獲得文件保存路徑，和file.transferTo(newFile);

在controller中使用MultipartFile file 來接受前端傳過來的文件，使用file對象可以獲得這個文件的一些屬性，比如文件名，文件大小等等。

@RequestMapping(value = "uploadfile.do

總結

以上是生活随笔為你收集整理的qstandarditemmodel 重写data函数后无法实现拖拽_实现类似百度网盘上传的功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。