實現拖拽上傳檔案的一款小控制項 dropzone

2021-06-26 01:46:30 字數 1040 閱讀 8629

因為專注所以專業。很多小巧的東西乍一看很不起眼,卻在特定的領域表現不俗,就是因為集中了熱情。

dropzone就是這樣一款小控制項,實現拖拽上傳。它不依賴於其它像jquery等js庫,而且支援多方面的定製。

使用dropzone所需要的準備工作很簡單,你只需要在你的頁面中增加:

這樣就可以使用dropzone的功能了。當然,對於伺服器端的檔案處理,需要自行解決。dropzone只是對前端進行控制。

如果想讓自己的拖拽上傳空間再顯得美觀些,比如提供上傳預覽啊什麼的,可以使用作者提供的另外幾個檔案:

css/dropzone.css

images/spritemap.png

images/[email protected]

將它們加入合適的路徑以便引用。

使用dropzone通常是建立乙個form控制項來引用:

其中標記為「dropzone

」的class屬性就是dropzone的「線人」,dropzone就是通過它滲透進來的。

名字「file」也可以通過更改dropzone的「paramname

」屬性來改變。

我寫了乙個引用的例子:

------------------------------------

拖拽上傳:

------------------------------------

普通上傳:

普通檔案上傳用作效果對比

後台就請大家自己實現試一下吧。

就像《三國演義》中呂布和趙雲沒有交過手一樣,dropzone也有一點小遺憾。dropzone對瀏覽器是有要求的,ie要10以上才支援,為之小嘆。

分享一款多檔案上傳控制項

近期,應專案要求,需要有一款通用的檔案上傳控制項。要求以下功能 1,多檔案上傳。2,顯示檔案上傳進度條。4,相容各主流瀏覽器。5,呼叫方便。6,支援多種上傳格式。於是乎,經過筆者的努力,這款檔案上傳控制項誕生了,它以知名上傳控制項 uploadify 為原型,加入c 現用mvc的方式顯示出來。俗話說...

推薦一款優雅的日曆控制項

專案需要用到日曆控制項,這是我們的效果圖。gradle 關聯 implementation com.haibin calendarview 3.4.0 使用 剛開始布局中使用的話注意是有包名路徑的,如果直接是使用的是系統自帶的日曆控制項。haibin calendarview calendarvie...

推薦一款優雅的日曆控制項

專案需要用到日曆控制項,這是我們的效果圖。gradle 關聯 implementation com.haibin calendarview 3.4.0 使用剛開始布局中使用的話注意是有包名路徑的,如果直接是使用的是系統自帶的日曆控制項。match parent android layout heig...