+ add uploader.

src/less/views/uploader.less

+/// ========================================================================
+/// ZUI: tree.less
+/// http://zui.sexy
+/// ========================================================================
+/// Copyright 2016 cnezsoft.com; Licensed MIT
+/// ========================================================================
+
+
+// Uploader container style
+
+.uploader {
+  margin-bottom: @line-height-computed;
+  position: relative;
+}
+
+
+// File drag and drop
+
+.file-dragable {position: relative}
+[data-drop-placeholder]:before {
+  content: attr(data-drop-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 2px dashed @color-warning;
+  background-color: rgba(255,255,255,.7);
+  z-index: 10;
+  font-size: 16px;
+  transition: all @animation-speed-fast;
+  text-align: center;
+  pointer-events: none;
+  .opacity(0);
+  transform: scale(.95);
+}
+.file-dragable[data-drop-placeholder]:before {
+  .opacity(1);
+  transform: scale(1);
+}
+.file-drag-enter[data-drop-placeholder]:before {
+  background-color: @color-warning-pale;
+}
+
+
+// File list
+
+.file-list {
+  min-height: 32px;
+  position: relative;
+  border: 1px solid @color-gray-light;
+  margin-bottom: @line-height-computed/2;
+
+  &[data-drag-placeholder] {
+    &:before {
+      display: block;
+      position: absolute;
+      right: 0;
+      left: 0;
+      content: attr(data-drag-placeholder);
+      text-align: center;
+      color: @color-gray-light;
+      line-height: 32px;
+      top: 50%;
+      margin-top: -15px;
+      transition: all @animation-speed-normal;
+    }
+
+    &:hover:before {
+      color: @color-gray;
+    }
+  }
+}
+
+
+// Uploader actions
+
+.uploader-actions {
+  background-color: @color-gray-pale;
+
+  .file-list + & {
+    border: 1px solid @color-gray-light;
+    border-top: none;
+    margin-top: -@line-height-computed/2;
+  }
+
+  .uploader-status {
+    line-height: 20px;
+    padding: 5px 10px;
+  }
+}
+
+
+// Uploader message
+.uploader-message {
+  color: @color-white;
+  background: @color-primary;
+  padding: 5px 10px;
+  display: none;
+  height: 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  .opacity(.95);
+
+  > .close {
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    color: inherit;
+    opacity: .4;
+    text-shadow: none;
+
+    &:hover {opacity: 1;}
+  }
+
+  &[data-type="danger"] {background: @color-danger;}
+  &[data-type="warning"] {background: @color-warning;}
+  &[data-type="info"] {background: @color-info;}
+  &[data-type="success"] {background: @color-success;}
+}
+
+
+// File in file list
+
+.file-list {
+  .file {
+    position: relative;
+    z-index: 0;
+    transition: background @animation-speed-normal;
+    background-color: @color-white;
+
+    + .file {
+      border-top: 1px solid @color-gray-light;
+    }
+  }
+
+  .file-wrapper {
+    position: relative;
+    z-index: 2;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    transition: background @animation-speed-normal;
+
+    &:hover {
+      background-color: rgba(0,0,0,.05);
+    }
+
+    > .file-icon,
+    > .content,
+    > .actions {
+      display: table-cell;
+      vertical-align: middle;
+    }
+
+    > .actions {
+      width: 150px;
+      text-align: right;
+
+      > .btn {
+        padding: 5px 8px;
+
+        &:hover {
+          background-color: rgba(0,0,0,.07);
+        }
+      }
+    }
+  }
+
+  .file-icon {
+    position: relative;
+    width: 32px;
+    line-height: 32px;
+    text-align: center;
+    .opacity(.7);
+    transition: opacity @animation-speed-normal;
+  }
+
+  .file-icon-image {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    background-color: @color-white;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .file-name {
+    transition: all @animation-speed-fast;
+
+    &[contenteditable] {
+      background-color: @color-white;
+      outline: 1px solid @color-primary;
+      padding: 0 5px;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@color-primary, 20%);
+    }
+  }
+
+  .file-name,
+  .file-size {
+    .nobr();
+    text-overflow: ellipsis;
+  }
+
+  .file-renaming {
+    .file-name[contenteditable] {text-overflow: initial;}
+  }
+
+  .file:hover .file-name {color: @color-primary;}
+  .file:hover .file-icon {opacity: 1;}
+
+  .file-wrapper > .content > .file-name {float: left;}
+  .file-wrapper > .content > .file-size {float: right; margin-top: 2px;}
+
+  .file-status {
+    display: inline-block;
+    text-align: right;
+    line-height: 20px;
+    padding: 5px;
+
+    &:hover {
+      background-color: rgba(0,0,0,.07);
+    }
+
+    > .icon {
+      vertical-align: middle;
+      line-height: 20px;
+      transition: all @animation-speed-slow .2s;
+      transform: scale(1);
+      opacity: 1;
+
+      &:before {content: @icon-check-circle;}
+    }
+
+    > .text {
+      display: inline-block;
+      padding: 0 6px;
+      line-height: 20px;
+      font-size: 12px;
+
+      &:empty {display: none}
+    }
+  }
+
+  .file[data-status="uploading"] .file-status {
+    > .icon {
+      transform: scale(0);
+      .opacity(0);
+    }
+
+    > .text {
+      border-radius: 10px;
+      background-color: @color-primary;
+      color: #fff;
+    }
+  }
+
+  .file[data-status="queue"] .file-status {color: @color-warning;}
+  .file[data-status="queue"] .file-status > .icon:before {content: @icon-cloud-upload;}
+  .file[data-status="failed"] .file-status {color: @color-danger;}
+  .file[data-status="failed"] .file-status > .icon:before {content: @icon-warning-sign;}
+  .file[data-status="done"] .file-status {color: @color-success;}
+
+  .file .actions > .btn-reset-file,
+  .file[data-status="failed"] .actions > .btn-rename-file,
+  .file[data-status="uploading"] .actions > .btn,
+  .file[data-status="done"] .actions > .btn {display: none}
+  .file[data-status="failed"] .actions > .btn-reset-file {display: inline-block;}
+
+  &.file-rename-by-click [data-status="queue"] .file-name:hover {
+    background-color: rgba(255,255,255,.5);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@color-primary, 20%);
+  }
+
+  .file-progress-bar {
+    position: absolute;
+    z-index: 10;
+    background-color: fade(@color-primary, 10%);
+    left: 0;
+    top: 0;
+    bottom: 0;
+    .opacity(0);
+    box-shadow: inset 0 -2px @color-primary;
+    transition: width .6s ease, opacity @animation-speed-normal;
+  }
+
+  .file[data-status="uploading"] .file-progress-bar {.opacity(1);}
+  .file[data-status="queue"] {background-color: @color-warning-pale;}
+  .file[data-status="failed"] {background-color: @color-danger-pale;}
+  .file[data-status="done"] {background-color: @color-white;}
+}
+
+
+// Large file list
+
+.file-list-lg {
+  .file {min-height: 50px;}
+
+  .file-icon {
+    width: 50px;
+    line-height: 50px;
+    .icon {
+      display: block;
+      font-size: 28px;
+      width: 50px;
+      line-height: 50px;
+      text-align: center;
+      position: relative;
+    }
+
+    .icon-file-o {
+      position: relative;
+      left: -2px;
+    }
+  }
+
+  .file-status {line-height: 40px;}
+  .file-status > .icon {font-size: 20px;}
+  .file[data-status="done"] .file-status {padding: 5px 12px;}
+
+  .file-wrapper > .content > .file-name {
+    float: none;
+    line-height: 20px;
+  }
+
+  .file-wrapper > .content > .file-size {
+    float: none;
+    line-height: 14px;
+  }
+
+  .file-wrapper > .actions > .btn {
+    padding: 14px 8px;
+  }
+
+  .file-renaming {
+    .file-name[contenteditable] {
+      line-height: 34px;
+      font-size: 14px;
+    }
+    .file-wrapper > .content > .file-size {display: none}
+  }
+}
+
+
+// File list grid
+
+.file-list-grid {
+  margin-left: -8px;
+  margin-right: -8px;
+  border: none;
+  .clearfix();
+
+  .file {
+    float: left;
+    width: 120px;
+    height: 120px;
+    margin: 8px 8px 35px 8px;
+    display: block;
+    border: 1px solid @color-gray-light;
+    border-radius: @border-radius-base;
+  }
+
+  .file .file-icon {
+    display: block;
+    width: 118px;
+    height: 118px;
+    overflow: hidden;
+  }
+
+  .file-icon > .icon {
+    font-size: 70px;
+    line-height: 118px;
+  }
+
+  .file-icon-image {
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+  }
+
+  .file-wrapper {
+    display: block;
+    width: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .file-wrapper > .content {
+    display: block;
+    left: -1px;
+    right: -1px;
+    text-align: center;
+    position: absolute;
+    bottom: -24px;
+    transition: all @animation-speed-fast;
+  }
+  .file-wrapper > .content > .file-name {
+    float: none;
+    line-height: 16px;
+    padding: 4px 0;
+    position: relative;
+    z-index: 5;
+    border: 1px solid transparent;
+  }
+  .file-wrapper > .content > .file-size {
+    line-height: 18px;
+    display: block;
+    position: absolute;
+    top: -26px;
+    left: 8px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background-color: #808080;
+    background-color: rgba(0,0,0,.5);
+    color: #fff;
+    .opacity(0);
+    transition: opacity @animation-speed-normal;
+  }
+  .file-renaming .file-wrapper > .content > .file-name,
+  .file-wrapper > .content:hover > .file-name {
+    word-break: break-all;
+    text-overflow: initial;
+    white-space: normal;
+    border-color: @color-gray-light;
+    background-color: @color-white;
+    box-shadow: none;
+    
+  }
+  .file-renaming .file-wrapper > .content > .file-name {
+    padding: 4px;
+    text-align: left;
+  }
+  .file:hover .file-wrapper > .content > .file-size {.opacity(1);}
+
+  .file-wrapper > .actions {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    width: 118px;
+  }
+
+  .file-wrapper:hover > .actions {background: rgba(255,255,255,.85)}
+
+  .file-wrapper > .actions > .file-status {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 4px 5px;
+    height: 28px;
+
+    > .icon {
+      display: inline-block;
+      position: relative;
+      font-size: 21px;
+      top: -1px;
+      text-shadow: -1px -1px 0 @color-white, 1px -1px 0 @color-white, -1px 1px 0 @color-white, 1px 1px 0 @color-white;
+    }
+
+    > .text {padding: 0;}
+  }
+
+  .file[data-status="uploading"] .file-wrapper > .actions > .file-status > .text {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 0 8px;
+  }
+  .file[data-status="failed"] .file-wrapper > .actions > .file-status {
+    background-color: @color-danger;
+    color: @color-white;
+    padding: 0 8px;
+    border-radius: 10px;
+    height: 20px;
+    top: 4px;
+    left: 4px;
+  }
+
+  .file-wrapper > .actions > .btn {
+    padding: 3px 6px;
+    .opacity(0);
+  }
+
+  .file-wrapper:hover > .actions > .btn {.opacity(1);}
+
+  .file-progress-bar {
+    box-shadow: inset 0 -4px @color-primary;
+  }
+
+  + .uploader-actions {border: none}
+}

zui.json

@@ -46,7 +46,7 @@
         "resource": ["assets/respond.js"]
       },
       "desc": "min/max-width media query polyfill",
-      "Souce": "Scott Jehl",
+      "souce": "Scott Jehl",
       "license": "MIT",
       "licenseFile": "https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT",
       "website": "https://github.com/scottjehl/Respond"
@@ -1229,6 +1229,16 @@
         "js": ["src/js/selectable.js"]
       },
       "ver": "1.5.0"
+    },
+    "uploader": {
+      "name": "文件上传",
+      "src": {
+        "js": ["src/js/uploader.js"],
+        "less": ["src/less/views/uploader.less"]
+      },
+      "dpds": ["plupload"],
+      "ver": "1.6.0",
+      "ignoreDpds": false
     }
   },
   "builds": {
@@ -1265,7 +1275,7 @@
     },
     "seperate": {
       "title": "Seperate bundles",
-      "bundles": ["jquery", "calendar", "kindeditor", "datetimepicker", "chosen", "chosenicons", "imgcutter", "datatable", "ieonly", "chart", "array", "hotkey", "board", "migrate1.2", "clipboard", "prettify", "sortable", "selectable", "colorpicker", "colorset.js", "imgready", "dashboard", "bootbox", "ueditor"]
+      "bundles": ["jquery", "calendar", "kindeditor", "datetimepicker", "chosen", "chosenicons", "imgcutter", "datatable", "ieonly", "chart", "array", "hotkey", "board", "migrate1.2", "clipboard", "prettify", "sortable", "selectable", "colorpicker", "colorset.js", "imgready", "dashboard", "bootbox", "ueditor", "uploader"]
     },
     "dist": {
       "title": "Dist bundles",