Add limit prop for upload

This commit is contained in:
afc163 2015-08-31 12:13:55 +08:00
parent f146c5312a
commit e77cca572b
4 changed files with 42 additions and 2 deletions

View File

@ -1,6 +1,6 @@
# 点击上传
- order: 1
- order: 0
经典款式,用户点击按钮弹出文件选择框。

View File

@ -0,0 +1,33 @@
# 文件列表限制
- order: 3
`limit` 属性控制文件列表数的上限。如设为 1 时,表示只能上传一个文件,新文件会顶掉旧文件。
---
````jsx
var Upload = antd.Upload;
var props = {
description: '支持扩展名为: .rar .zip ...',
action: '/upload.do',
data: {},
accept: '',
uploadTip: '',
limit: 1,
onStart(file){
console.log(file.uid);
}
};
React.render(
<Upload {...props}>
<button className="ant-btn ant-btn-ghost">
<i className="anticon anticon-upload"></i> 点击上传,只支持一个文件
</button>
</Upload>,
document.getElementById('components-upload-demo-limit')
);
````

View File

@ -25,6 +25,9 @@ const AntUpload = React.createClass({
file: file,
status: 'downloading'
});
if (nextDownloadList.length === this.props.limit + 1) {
nextDownloadList = nextDownloadList.slice(1);
}
this.setState({
downloadList: nextDownloadList
});
@ -84,6 +87,7 @@ const AntUpload = React.createClass({
onSuccess: noop,
onProgress: noop,
onRemove: noop,
limit: Number.MAX_VALUE,
urlResolver: function(ret) {
try {
return JSON.parse(ret).url;
@ -117,7 +121,9 @@ const AntUpload = React.createClass({
{this.props.children}
</Upload>
</div>
<UploadList items={this.state.downloadList} onRemove={this.onRemove}/>
<UploadList items={this.state.downloadList}
onRemove={this.onRemove}
limit={props.limit} />
</div>
);
}

View File

@ -29,6 +29,7 @@
| onSuccess | 可选参数, success callback | Function | 无 |
| onProgress | 可选参数, progress callback, 现代浏览器有效 | Function | 无 |
| urlResolver| 通过解析请求返回数据,获得文件上传的远程地址 | Function | `function() { return JSON.parse(ret).url }` |
| limit | 文件上传数量的限制 | Number | Number.MAX_VALUE |
### onError