diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index d2fa42f313..f55f78e780 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -6,32 +6,57 @@ title: 图片卡片样式
上传文件为图片,可展示本地缩略图。
````jsx
-import { Upload, Icon } from 'antd';
+import { Upload, Icon, Modal } from 'antd';
-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',
- }]
-};
+const ImageUploadList = React.createClass({
+ getInitialState() {
+ return {
+ priviewVisible: false,
+ priviewImage: '',
+ };
+ },
+ handleCancel() {
+ this.setState({
+ priviewVisible: false,
+ });
+ },
+ 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({
+ priviewImage: file.url,
+ priviewVisible: true,
+ });
+ }
+ };
+ return (
+
+ );
+ }
+});
-ReactDOM.render(
-
-, mountNode);
+ReactDOM.render(, mountNode);
````
````css
diff --git a/components/upload/index.jsx b/components/upload/index.jsx
index 4eaabfada6..3ec2a8403a 100644
--- a/components/upload/index.jsx
+++ b/components/upload/index.jsx
@@ -188,11 +188,21 @@ export default class Upload extends React.Component {
}
}
+ handlePreview = (file) => {
+ if ('onPreview' in this.props) {
+ this.props.onPreview(file);
+ }
+ }
+
handleManualRemove = (file) => {
/*eslint-disable */
file.status = 'removed';
/*eslint-enable */
- this.handleRemove(file);
+ if ('onRemove' in this.props) {
+ this.props.onRemove(file);
+ } else {
+ this.handleRemove(file);
+ }
}
onChange = (info) => {
@@ -235,6 +245,7 @@ export default class Upload extends React.Component {
uploadList = (
);
}
diff --git a/components/upload/index.md b/components/upload/index.md
index d6ff2f8ed6..c5540c0ede 100644
--- a/components/upload/index.md
+++ b/components/upload/index.md
@@ -29,8 +29,8 @@ english: Upload
| beforeUpload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 `false` 或者 Promise 则停止上传。**注意:该方法不支持老 IE**。 | Function | 无 |
| onChange | 可选参数, 上传文件改变时的状态,详见 onChange | Function | 无 |
| listType | 上传列表的内建样式,支持两种基本样式 `text` or `picture` | String | 'text'|
-| className | 自定义类名 | String | 无 |
-
+| onPreview | 点击文件链接时的回调 | Function(file) | 无 |
+| onRemove | 点击移除文件时的回调 | Function(file) | 无 |
### onChange
diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx
index 7fb1eafc23..8c962f13bb 100644
--- a/components/upload/uploadList.jsx
+++ b/components/upload/uploadList.jsx
@@ -24,10 +24,15 @@ export default class UploadList extends React.Component {
}
};
- handleClose(file) {
+ handleClose = (file) => {
this.props.onRemove(file);
}
+ handlePreview = (file, e) => {
+ e.preventDefault();
+ return this.props.onPreview(file);
+ }
+
componentDidUpdate() {
if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') {
return;
@@ -66,6 +71,7 @@ export default class UploadList extends React.Component {
}
} else {
icon = ( this.handlePreview(file, e)}
href={file.url}
target="_blank">
);
@@ -88,13 +94,13 @@ export default class UploadList extends React.Component {