ant-design/components/upload/demo/picture-card.md

121 lines
2.5 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 8
2016-09-18 11:08:54 +08:00
title:
2016-08-25 09:46:19 +08:00
zh-CN: 图片卡片样式
en-US: Pictures with card tyle
2016-03-31 09:40:55 +08:00
---
2016-01-15 16:44:07 +08:00
2016-08-25 09:46:19 +08:00
## zh-CN
2016-01-15 16:44:07 +08:00
上传文件为图片,可展示本地缩略图。
2016-08-25 09:46:19 +08:00
## en-US
If uploade file is picture, a thumbnail can be shown.
2016-01-15 16:44:07 +08:00
````jsx
2016-04-05 12:30:14 +08:00
import { Upload, Icon, Modal } from 'antd';
2016-01-15 16:44:07 +08:00
2016-04-05 12:30:14 +08:00
const ImageUploadList = React.createClass({
getInitialState() {
return {
2016-08-12 14:16:59 +08:00
previewVisible: false,
previewImage: '',
2016-04-05 12:30:14 +08:00
};
},
handleCancel() {
this.setState({
2016-08-12 14:16:59 +08:00
previewVisible: false,
2016-04-05 12:30:14 +08:00
});
},
render() {
const props = {
action: '/upload.do',
listType: 'picture-card',
defaultFileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
}],
onPreview: (file) => {
this.setState({
2016-08-12 14:16:59 +08:00
previewImage: file.url,
previewVisible: true,
2016-04-05 12:30:14 +08:00
});
2016-05-11 09:32:33 +08:00
},
2016-04-05 12:30:14 +08:00
};
return (
<div className="clearfix">
<Upload {...props}>
<Icon type="plus" />
2016-09-18 11:08:54 +08:00
<div className="ant-upload-text">Upload</div>
2016-04-05 12:30:14 +08:00
</Upload>
2016-08-23 21:00:35 +08:00
<a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" rel="noopener noreferrer" className="upload-example">
<img alt="example" src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
2016-08-25 09:46:19 +08:00
<span>sample</span>
2016-04-05 12:30:14 +08:00
</a>
2016-08-12 14:16:59 +08:00
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" src={this.state.previewImage} />
2016-04-05 12:30:14 +08:00
</Modal>
</div>
);
2016-05-11 09:32:33 +08:00
},
2016-04-05 12:30:14 +08:00
});
2016-01-15 16:44:07 +08:00
2016-04-05 12:30:14 +08:00
ReactDOM.render(<ImageUploadList />, mountNode);
2016-01-15 16:44:07 +08:00
````
````css
2016-08-25 09:46:19 +08:00
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
2016-01-15 16:44:07 +08:00
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
2016-01-15 16:44:07 +08:00
margin-top: 8px;
font-size: 12px;
color: #666;
}
.upload-example {
position: relative;
display: inline-block;
height: 96px;
width: 96px;
padding: 8px;
border: 1px solid #d9d9d9;
border-radius: 6px;
vertical-align: top;
2016-01-15 16:44:07 +08:00
}
.upload-example img {
height: 78px;
width: 78px;
}
.upload-example:before {
position: absolute;
bottom: 8px;
left: 8px;
content: ' ';
width: 78px;
height: 24px;
background-color: #808080;
opacity: .8;
}
.upload-example span {
position: absolute;
bottom: 8px;
left: 8px;
width: 78px;
height: 24px;
color: #fff;
line-height: 24px;
text-align: center;
}
````