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