mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge branch 'master' into develop-0.12.0
This commit is contained in:
commit
2e3ccfb345
@ -1,32 +0,0 @@
|
||||
# 拖拽上传
|
||||
|
||||
- order: 4
|
||||
|
||||
样式简单一些。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Upload, Icon } from 'antd';
|
||||
const Dragger = Upload.Dragger;
|
||||
|
||||
const props = {
|
||||
name: 'file',
|
||||
showUploadList: false,
|
||||
action: '/upload.do'
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Dragger {...props}>
|
||||
<Icon type="plus" />
|
||||
</Dragger>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-upload-demo-drag-simple {
|
||||
width: 246px;
|
||||
height: 146px;
|
||||
}
|
||||
````
|
@ -13,23 +13,25 @@ const Dragger = Upload.Dragger;
|
||||
const props = {
|
||||
name: 'file',
|
||||
showUploadList: false,
|
||||
action: '/upload.do'
|
||||
action: '/upload.do',
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持单个或批量上传,严禁上传公司内部资料及其他违禁文件</p>
|
||||
</Dragger>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-upload-demo-drag {
|
||||
height: 180px;
|
||||
}
|
||||
<div>
|
||||
<div style={{ width: 246, height: 140 }}>
|
||||
<Dragger {...props}>
|
||||
<Icon type="plus" />
|
||||
</Dragger>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, height: 180 }}>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持单个或批量上传,严禁上传公司内部资料及其他违禁文件</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -1,6 +1,7 @@
|
||||
# 多文件选择
|
||||
|
||||
- order: 5
|
||||
- hidden: 5
|
||||
|
||||
按住 ctrl 可选择多个文件,`ie10+` 支持。
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
上传文件为图片,可展示本地缩略图。
|
||||
|
||||
`IE8/9` 不支持浏览器本地缩略图展示([ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)),可以写 `thumbUrl` 属性来代替。
|
||||
`IE8/9` 不支持浏览器本地缩略图展示([Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)),可以写 `thumbUrl` 属性来代替。
|
||||
|
||||
---
|
||||
|
||||
@ -30,10 +30,28 @@ const props = {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Upload {...props}>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
<br />
|
||||
<br />
|
||||
<Upload {...props} className="upload-list-inline">
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
/* 加几行样式将上传项变成平铺样式 */
|
||||
.upload-list-inline .ant-upload-list-item {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
````
|
||||
|
@ -24,7 +24,7 @@
|
||||
| action | 必选参数, 上传的地址 | String | 无 |
|
||||
| data | 可选参数, 上传所需参数 | Object | 无 |
|
||||
| showUploadList | 可选参数, 是否展示 uploadList, 默认开启 | Boolean | true |
|
||||
| multiple | 可选参数, 是否支持多选文件,支持 `ie10+` | Boolean | false |
|
||||
| multiple | 可选参数, 是否支持多选文件,`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | Boolean | false |
|
||||
| accept | 可选参数, 接受上传的文件类型, 详见 input accept Attribute | String | 无 |
|
||||
| beforeUpload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 `false` 或者 Promise 则停止上传。**注意:该方法不支持老 IE**。 | Function | 无 |
|
||||
| onChange | 可选参数, 上传文件改变时的状态,详见 onChange | Function | 无 |
|
||||
|
@ -911,6 +911,7 @@ footer ul li > a {
|
||||
font-size: 12px;
|
||||
margin: 0.5em 0;
|
||||
padding-right: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-box .collapse {
|
||||
|
@ -65,7 +65,6 @@
|
||||
.@{iconfont-css-prefix}-search:before {content:"\e690";}
|
||||
.@{iconfont-css-prefix}-share-alt:before {content:"\e68e";}
|
||||
.@{iconfont-css-prefix}-setting:before {content:"\e68d";}
|
||||
.@{iconfont-css-prefix}-search:before {content:"\e68c";}
|
||||
.@{iconfont-css-prefix}-poweroff:before {content:"\e68b";}
|
||||
.@{iconfont-css-prefix}-picture:before {content:"\e689";}
|
||||
.@{iconfont-css-prefix}-phone:before {content:"\e688";}
|
||||
|
Loading…
Reference in New Issue
Block a user