afc163
9 years ago
13 changed files with 244 additions and 158 deletions
@ -0,0 +1,40 @@ |
|||
# 传入已上传的文件 |
|||
|
|||
- order: 1 |
|||
|
|||
对已上传的文件进行编辑。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Upload = antd.Upload; |
|||
|
|||
var props = { |
|||
action: '/upload.do', |
|||
onChange(info) { |
|||
if (info.file.status !== 'uploading') { |
|||
console.log(info.file); |
|||
console.log(info.fileList); |
|||
} |
|||
}, |
|||
defaultFileList: [{ |
|||
uid: -1, |
|||
name: 'xxx.png', |
|||
status: 'done', |
|||
url: 'http://www.baidu.com/xxx.png' |
|||
}, { |
|||
uid: -2, |
|||
name: 'yyy.png', |
|||
status: 'done', |
|||
url: 'http://www.baidu.com/yyy.png' |
|||
}] |
|||
}; |
|||
|
|||
React.render( |
|||
<Upload {...props}> |
|||
<button className="ant-btn ant-btn-ghost"> |
|||
<i className="anticon anticon-upload"></i> 点击上传 |
|||
</button> |
|||
</Upload> |
|||
, document.getElementById('components-upload-demo-defaultfilelist')); |
|||
```` |
|||
@ -0,0 +1,72 @@ |
|||
# 完全控制的上传列表 |
|||
|
|||
- order: 2 |
|||
|
|||
使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况： |
|||
|
|||
1) 上传列表数量的限制。 |
|||
|
|||
2) 读取远程路径并显示链接。 |
|||
|
|||
3) 按照服务器返回信息筛选成功上传的文件。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Upload = antd.Upload; |
|||
var fileList = [{ |
|||
uid: -1, |
|||
name: 'xxx.png', |
|||
status: 'done', |
|||
url: 'http://www.baidu.com/xxx.png' |
|||
}]; |
|||
|
|||
var MyUpload = React.createClass({ |
|||
getInitialState() { |
|||
return { |
|||
fileList: fileList |
|||
}; |
|||
}, |
|||
handleChange(info) { |
|||
let fileList = info.fileList; |
|||
|
|||
// 1. 上传列表数量的限制 |
|||
// 只显示最近上传的一个，旧的会被新的顶掉 |
|||
fileList = fileList.slice(-2); |
|||
|
|||
// 2. 读取远程路径并显示链接 |
|||
fileList = fileList.map(function(file) { |
|||
if (file.response) { |
|||
// 组件会将 file.url 作为链接进行展示 |
|||
file.url = JSON.parse(file.response).url; |
|||
} |
|||
return file; |
|||
}); |
|||
|
|||
// 3. 按照服务器返回信息筛选成功上传的文件 |
|||
fileList = fileList.filter(function(file) { |
|||
if (file.response) { |
|||
return JSON.parse(file.response).status === 'success'; |
|||
} |
|||
return true; |
|||
}); |
|||
|
|||
this.setState({ |
|||
fileList: fileList |
|||
}); |
|||
}, |
|||
render() { |
|||
var props = { |
|||
action: '/upload.do', |
|||
onChange: this.handleChange |
|||
}; |
|||
return <Upload {...props} fileList={this.state.fileList}> |
|||
<button className="ant-btn ant-btn-ghost"> |
|||
<i className="anticon anticon-upload"></i> 点击上传 |
|||
</button> |
|||
</Upload>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<MyUpload />, document.getElementById('components-upload-demo-filelist')); |
|||
```` |
|||
@ -1,33 +0,0 @@ |
|||
# 文件列表限制 |
|||
|
|||
- 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') |
|||
); |
|||
```` |
|||
|
|||
Loading…
Reference in new issue