use onChange

This commit is contained in:
afc163 2015-08-31 21:26:34 +08:00
parent 03cc7cbffa
commit f50342b2ba
6 changed files with 48 additions and 58 deletions

View File

@ -10,13 +10,10 @@
var Upload = antd.Upload;
var props = {
description: '支持扩展名为: .rar .zip ...',
action: '/upload.do',
data: {},
accept: '',
uploadTip: '',
onStart(file){
console.log(file.uid);
onChange(info) {
console.log(info.file);
console.log(info.fileList);
}
};

View File

@ -11,10 +11,7 @@ var Dragger = antd.Upload.Dragger;
var props = {
name: 'file',
action: '/upload.do',
data: {},
accept: '',
uploadTip: ''
action: '/upload.do'
};
React.render(

View File

@ -11,10 +11,7 @@ var Dragger = antd.Upload.Dragger;
var props = {
name: 'file',
action: '/upload.do',
data: {},
accept: 'i',
uploadTip: ''
action: '/upload.do'
};
React.render(

View File

@ -10,13 +10,9 @@
var Upload = antd.Upload;
var props = {
description: '支持扩展名为: .rar .zip ...',
action: '/upload.do',
data: {},
accept: '',
uploadTip: '',
limit: 1,
onStart(file){
onStart(file) {
console.log(file.uid);
}
};

View File

@ -5,7 +5,6 @@ import Message from '../message';
import UploadList from './uploadList';
import getFileItem from './getFileItem';
const prefixCls = 'ant-upload';
let fileIndex = 0;
function noop() {
}
@ -18,20 +17,18 @@ const AntUpload = React.createClass({
},
onStart(file) {
let nextFileList = this.state.fileList;
nextFileList.push({
index: fileIndex++,
uid: file.uid || '',
filename: file.name,
file: file,
status: 'uploading'
});
file.status = 'started';
nextFileList.push(file);
if (nextFileList.length === this.props.limit + 1) {
nextFileList = nextFileList.slice(1);
}
this.setState({
fileList: nextFileList
});
this.props.onStart(file);
this.props.onChange({
file: file,
fileList: nextFileList
});
},
removeFile(file){
var fileList = this.state.fileList.concat();
@ -45,33 +42,45 @@ const AntUpload = React.createClass({
});
},
onSuccess(ret, file) {
var res = this.props.onSuccess(ret, file);
if (res !== false) {
var fileList = this.state.fileList.concat();
Message.success(file.name + '上传完成');
let targetItem = getFileItem(file, fileList);
targetItem.status = 'done';
//
if (typeof this.props.urlResolver === 'function') {
targetItem.url = this.props.urlResolver(ret);
}
this.setState({
fileList: fileList
});
} else {
this.removeFile(file);
var fileList = this.state.fileList.concat();
Message.success(file.name + '上传完成');
let targetItem = getFileItem(file, fileList);
targetItem.status = 'done';
//
if (typeof this.props.urlResolver === 'function') {
targetItem.url = this.props.urlResolver(ret);
}
this.setState({
fileList: fileList
});
this.props.onChange({
file: targetItem,
fileList: this.state.fileList,
response: ret
});
},
onProgress(e, file) {
this.props.onProgress(e, file);
this.props.onChange({
event: e,
file: file,
fileList: this.state.fileList
});
},
onError(err, responce, file) {
onError(err, response, file) {
Message.error(file.name + ' 上传失败');
this.removeFile(file);
this.props.onError(err, responce, file);
file.response = response;
this.props.onChange({
error: err,
file: file,
fileList: this.fileList
});
},
onRemove(file){
this.props.onRemove(file);
onRemove(file) {
this.props.onChange({
file: file,
fileList: this.fileList
});
},
getDefaultProps() {
return {
@ -81,12 +90,7 @@ const AntUpload = React.createClass({
action: '',
data: {},
accept: '',
uploadTip: '',
onStart: noop,
onError: noop,
onSuccess: noop,
onProgress: noop,
onRemove: noop,
onChange: noop,
limit: Number.MAX_VALUE,
urlResolver: function(ret) {
try {
@ -122,7 +126,6 @@ const AntUpload = React.createClass({
</Upload>
</div>
<UploadList items={this.state.fileList}
onRemove={this.onRemove}
limit={props.limit} />
</div>
);

View File

@ -36,10 +36,10 @@ export default React.createClass({
let list = this.state.items.map((file) => {
let statusIcon = file.status === 'done' ? <i className={'anticon anticon-check ' + prefixCls + '-success-icon'}></i> :
<i className="anticon anticon-loading"></i>;
let filename = file.url ? <a className={prefixCls + '-item-name'} href={file.url} _target="_blank">{file.filename}</a> :
<b className={prefixCls + '-item-name'}>{file.filename}</b>;
let filename = file.url ? <a className={prefixCls + '-item-name'} href={file.url} _target="_blank">{file.name}</a> :
<b className={prefixCls + '-item-name'}>{file.name}</b>;
return (
<div className={prefixCls + '-list-item'} key={file.index}>
<div className={prefixCls + '-list-item'} key={file.uid}>
{statusIcon}
{filename}
<i className="anticon anticon-cross" ref="theCloseBtn"