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">
|
2016-04-18 14:58:38 +08:00
|
|
|
<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 */
|
2016-01-16 16:39:52 +08:00
|
|
|
.ant-upload-select-picture-card i {
|
2016-01-15 16:44:07 +08:00
|
|
|
font-size: 28px;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
|
2016-01-16 16:39:52 +08:00
|
|
|
.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;
|
2016-01-16 16:39:52 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
````
|