mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
docs: update demo for upload
This commit is contained in:
Benjy Cui
parent
bd55d21f83
commit
59e0c6a4c1
94
components/upload/demo/avatar.md
Normal file
94
components/upload/demo/avatar.md
Normal file
@ -0,0 +1,94 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 用户头像
|
||||
en-US: Avatar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。
|
||||
|
||||
> `beforeUpload` 的返回值可以是一个 Promise 以支持也支持异步检查：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
|
||||
|
||||
## en-US
|
||||
|
||||
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
|
||||
|
||||
> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
|
||||
|
||||
````jsx
|
||||
import { Upload, Icon, message } from 'antd';
|
||||
|
||||
function getBase64(img, callback) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => callback(reader.result));
|
||||
reader.readAsDataURL(img);
|
||||
}
|
||||
|
||||
function beforeUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
if (!isJPG) {
|
||||
message.error('You can only upload JPG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
}
|
||||
|
||||
class Avatar extends React.Component {
|
||||
state = {};
|
||||
|
||||
handleChange = (info) => {
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const imageUrl = this.state.imageUrl;
|
||||
return (
|
||||
<Upload
|
||||
className="avatar-uploader"
|
||||
name="avatar"
|
||||
showUploadList={false}
|
||||
action="/upload.do"
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{
|
||||
imageUrl ?
|
||||
<img src={imageUrl} role="presentation" className="avatar" /> :
|
||||
<Icon type="plus" className="avatar-uploader-trigger" />
|
||||
}
|
||||
</Upload>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Avatar />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.avatar-uploader,
|
||||
.avatar-uploader-trigger,
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
display: block;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-uploader-trigger {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
}
|
||||
````
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 限制用户上传的文件
|
||||
en-US: Filter uploads files
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。
|
||||
|
||||
也支持异步检查，`beforeUpload` 的返回值可以是一个 Promise：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
|
||||
|
||||
## en-US
|
||||
You can use `beforeUpload` to check whether user can upload, for example, limit file type only to be JPG. Checking can also be asynchronous. The return value can also be a Promise for function `beforeUpload`
|
||||
|
||||
````jsx
|
||||
import { Upload, Button, Icon, message } from 'antd';
|
||||
|
||||
const props = {
|
||||
action: '/upload.do',
|
||||
multiple: true,
|
||||
beforeUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
if (!isJPG) {
|
||||
message.error('you can only upload JPG file~');
|
||||
}
|
||||
return isJPG;
|
||||
},
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Upload {...props}>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> upload
|
||||
</Button>
|
||||
</Upload>
|
||||
, mountNode);
|
||||
````
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 1
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 传入已上传的文件
|
||||
en-US: Set files that have been uploaded
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
---
|
||||
order: 3
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 拖拽上传
|
||||
en-US: Upload files by dragging and dropping
|
||||
en-US: Drag and Drop
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以把文件拖入指定区域，完成上传，同样支持点击上传。
|
||||
把文件拖入指定区域，完成上传，同样支持点击上传。
|
||||
|
||||
设置 `multiple` 后，在 `IE10+` 可以一次上传多个文件。
|
||||
|
||||
## en-US
|
||||
|
||||
You can drag files to a specific area, to upload. Meanwhile you can also upload by selecting.
|
||||
|
||||
We can upload serveral files at one in modern browser by setting `multiple`.
|
||||
|
||||
````jsx
|
||||
import { Upload, Icon, message } from 'antd';
|
||||
@ -20,27 +23,23 @@ const Dragger = Upload.Dragger;
|
||||
|
||||
const props = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
showUploadList: false,
|
||||
action: '/upload.do',
|
||||
onChange(info) {
|
||||
if (info.file.status !== 'uploading') {
|
||||
const status = info.file.status;
|
||||
if (status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
if (status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully.`);
|
||||
} else if (info.file.status === 'error') {
|
||||
} else if (status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<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">
|
||||
@ -50,6 +49,5 @@ ReactDOM.render(
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 2
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 完全控制的上传列表
|
||||
en-US: Complete control over file list
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 上传图片原位显示
|
||||
en-US: Show uploaded image in-place
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
上传图片原位显示。
|
||||
|
||||
## en-US
|
||||
|
||||
Show uploaded image in-place.
|
||||
|
||||
```jsx
|
||||
import { Upload, Icon } from 'antd';
|
||||
|
||||
const Demo = React.createClass({
|
||||
getInitialState() {
|
||||
return {};
|
||||
},
|
||||
handleChange(info) {
|
||||
if (info.file.status === 'done') {
|
||||
this.setState({
|
||||
// Get this url from response in real world.
|
||||
imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
});
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const imageUrl = this.state.imageUrl;
|
||||
return (
|
||||
<Upload
|
||||
className="avatar-uploader"
|
||||
name="avatar"
|
||||
showUploadList={false}
|
||||
action="/upload.do"
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{
|
||||
imageUrl ?
|
||||
<img src={imageUrl} role="presentation" className="avatar" /> :
|
||||
<Icon type="plus" className="avatar-uploader-trigger" />
|
||||
}
|
||||
</Upload>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar-uploader,
|
||||
.avatar-uploader-trigger,
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
display: block;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-uploader-trigger {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
}
|
||||
```
|
||||
@ -1,36 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: 多文件选择
|
||||
en-US: Multifile Selection
|
||||
---
|
||||
|
||||
For debugging.
|
||||
|
||||
````jsx
|
||||
import { Upload, message, Button, Icon } from 'antd';
|
||||
|
||||
const props = {
|
||||
action: '/upload.do',
|
||||
multiple: true,
|
||||
onChange(info) {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} upload successfully。`);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} upload unsuccessfully。`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Upload {...props}>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> upload
|
||||
</Button>
|
||||
</Upload>
|
||||
, mountNode);
|
||||
````
|
||||
@ -1,74 +1,72 @@
|
||||
---
|
||||
order: 8
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 图片卡片样式
|
||||
en-US: Pictures with card tyle
|
||||
zh-CN: 照片墙
|
||||
en-US: Pictures Wall
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
上传文件为图片，可展示本地缩略图。
|
||||
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
|
||||
|
||||
## en-US
|
||||
|
||||
If uploade file is picture, a thumbnail can be shown.
|
||||
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
|
||||
|
||||
````jsx
|
||||
import { Upload, Icon, Modal } from 'antd';
|
||||
|
||||
const ImageUploadList = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
class PicturesWall extends React.Component {
|
||||
state = {
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
};
|
||||
},
|
||||
handleCancel() {
|
||||
this.setState({
|
||||
previewVisible: false,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const props = {
|
||||
action: '/upload.do',
|
||||
listType: 'picture-card',
|
||||
defaultFileList: [{
|
||||
fileList: [{
|
||||
uid: -1,
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
}],
|
||||
onPreview: (file) => {
|
||||
};
|
||||
|
||||
handleCancel = () => this.setState({ previewVisible: false })
|
||||
|
||||
handlePreview = (file) => {
|
||||
this.setState({
|
||||
previewImage: file.url || file.thumbUrl,
|
||||
previewVisible: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
return (
|
||||
<div className="clearfix">
|
||||
<Upload {...props}>
|
||||
}
|
||||
|
||||
handleChange = ({ fileList }) => this.setState({ fileList })
|
||||
|
||||
render() {
|
||||
const { previewVisible, previewImage, fileList } = this.state;
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<Icon type="plus" />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</Upload>
|
||||
<a
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="upload-example"
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="clearfix">
|
||||
<Upload
|
||||
action="/upload.do"
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onPreview={this.handlePreview}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<img alt="example" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
|
||||
<span>sample</span>
|
||||
</a>
|
||||
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
|
||||
<img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
|
||||
{fileList.length >= 3 ? null : uploadButton}
|
||||
</Upload>
|
||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<ImageUploadList />, mountNode);
|
||||
ReactDOM.render(<PicturesWall />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
@ -83,42 +81,4 @@ ReactDOM.render(<ImageUploadList />, mountNode);
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
````
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
exports[`test renders ./components/upload/demo/basic.md correctly 1`] = `
|
||||
exports[`test renders ./components/upload/demo/avatar.md correctly 1`] = `
|
||||
<span
|
||||
class="">
|
||||
class="avatar-uploader">
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
style="display:;" />
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text" />
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/upload/demo/beforeUpload.md correctly 1`] = `
|
||||
exports[`test renders ./components/upload/demo/basic.md correctly 1`] = `
|
||||
<span
|
||||
class="">
|
||||
<div
|
||||
@ -69,23 +67,13 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/upload/demo/drag.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="width:246px;height:140px;">
|
||||
<span
|
||||
class="">
|
||||
<div
|
||||
class="ant-upload ant-upload-drag" />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
<div
|
||||
style="margin-top:16px;height:180px;">
|
||||
<span
|
||||
class="">
|
||||
<div
|
||||
class="ant-upload ant-upload-drag" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -119,26 +107,6 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/upload/demo/inplace.md correctly 1`] = `
|
||||
<span
|
||||
class="avatar-uploader">
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
style="display:;" />
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/upload/demo/multiple.md correctly 1`] = `
|
||||
<span
|
||||
class="">
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
style="display:;" />
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text" />
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
|
||||
<div
|
||||
class="clearfix">
|
||||
@ -185,18 +153,6 @@ exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture-card"
|
||||
style="display:;" />
|
||||
</span>
|
||||
<a
|
||||
class="upload-example"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">
|
||||
<img
|
||||
alt="example"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
|
||||
<span>
|
||||
sample
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user