mirror of
https://github.com/getrebuild/rebuild.git
synced 2024-09-20 15:35:55 +08:00
IMAGE/FILE
This commit is contained in:
parent
9a6f657b5a
commit
8ee39d6ee0
|
@ -66,7 +66,7 @@ public class FileUploader extends HttpServlet {
|
|||
item.write(temp);
|
||||
|
||||
String cloud = req.getParameter("cloud");
|
||||
if ("true".equals(cloud)) {
|
||||
if ("true".equals(cloud) || "auto".equals(cloud)) {
|
||||
uploadName = QiniuCloud.upload(temp);
|
||||
if (temp.exists()) {
|
||||
temp.delete();
|
||||
|
|
|
@ -5,7 +5,12 @@
|
|||
<link rel="stylesheet" type="text/css" href="${baseUrl}/assets/lib/perfect-scrollbar.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="${baseUrl}/assets/lib/rb-base.css">
|
||||
<link rel="stylesheet" type="text/css" href="${baseUrl}/assets/css/rb-page.css">
|
||||
<script>__baseUrl='${baseUrl}'</script>
|
||||
<script>
|
||||
__baseUrl='${baseUrl}'
|
||||
rb = rb = {};
|
||||
rb.baseUrl = '${baseUrl}';
|
||||
rb.storageUrl = 'http://rb-cdn.errorpage.cn/';
|
||||
</script>
|
||||
<!--[if IE]>
|
||||
<script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
|
||||
<![endif]-->
|
|
@ -2,6 +2,7 @@
|
|||
height: 2.8rem;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
height: 3.4rem;
|
||||
}
|
||||
|
@ -37,6 +38,7 @@
|
|||
.modal-body.iframe {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.modal-body.iframe iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -51,13 +53,14 @@ body.dialog .main-content {
|
|||
}
|
||||
|
||||
body.dialog .main-content .footer {
|
||||
padding-bottom:0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
textarea.row2x {
|
||||
height: 52px !important;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea.row3x {
|
||||
height: 72px !important;
|
||||
resize: none;
|
||||
|
@ -80,28 +83,97 @@ a {
|
|||
min-height: 200px;
|
||||
}
|
||||
|
||||
.img-field>span{
|
||||
display: inline-block;
|
||||
margin-right: 9px;
|
||||
margin-bottom: 9px;
|
||||
.rb-form .type-IMAGE {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
a.img-upload {
|
||||
|
||||
.rb-form .type-FILE {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.img-field>span {
|
||||
margin-bottom: 6px;
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img-field .img-upload {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
padding: 1px;
|
||||
position: relative;
|
||||
}
|
||||
a.img-upload:hover{
|
||||
|
||||
.img-field .img-upload>img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.img-field label.img-upload{
|
||||
padding-top: 5px;
|
||||
}
|
||||
.img-field label.img-upload:hover {
|
||||
border: 1px solid #5f99f5;
|
||||
}
|
||||
|
||||
.img-upload > span.zmdi {
|
||||
.img-field label.img-upload .zmdi {
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
}
|
||||
.img-upload > img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
.img-field a.img-upload {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.img-field a.img-upload b, .file-field .img-thumbnail b {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-field a.img-upload:hover b, .file-field .img-thumbnail:hover b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img-field a.img-upload:hover b:hover, .file-field .img-thumbnail:hover b:hover {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.file-field .file-select {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.file-field .img-thumbnail {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
max-width: 240px;
|
||||
min-height: 38px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-field .img-thumbnail>i.zmdi {
|
||||
font-size: 36px;
|
||||
float: left;
|
||||
width: 42px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-field .img-thumbnail>span {
|
||||
margin-left: 42px;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
}
|
|
@ -49,7 +49,7 @@ class RbModal extends React.Component {
|
|||
if (height == 0 || height == that.__lastHeight) return;
|
||||
$(that.refs['rbmodal.body']).height(height);
|
||||
that.__lastHeight = height;
|
||||
}, 400, 'RbModal-resize');
|
||||
}, 100, 'RbModal-resize');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,8 @@ class RbForm extends React.Component {
|
|||
{this.props.children}
|
||||
<div className="form-group row footer">
|
||||
<div className="col-12 col-sm-8 col-lg-4 offset-sm-3">
|
||||
<button className="btn btn-primary btn-space" type="button">保存</button>
|
||||
<button className="btn btn-primary btn-space" type="button" onClick={()=>this.post()}>保存</button>
|
||||
<button className="btn btn-secondary btn-space" type="button" onClick={()=>location.reload()}>取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -19,7 +20,15 @@ class RbForm extends React.Component {
|
|||
)
|
||||
}
|
||||
componentDidMount() {
|
||||
$('.rb-loading-active').removeClass('rb-loading-active');
|
||||
if (parent && parent.rbModal) parent.rbModal.loaded()
|
||||
$('.rb-loading-active').removeClass('rb-loading-active')
|
||||
}
|
||||
post() {
|
||||
let vals = React.Children.map(this.props.children, function(child) {
|
||||
console.log(child)
|
||||
if (child) return child.getValue()
|
||||
})
|
||||
console.log(vals)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -29,9 +38,8 @@ class RbFormElement extends React.Component {
|
|||
this.state = { ...props };
|
||||
}
|
||||
render() {
|
||||
console.log('Fire : ' + JSON.stringify(this.props))
|
||||
return (
|
||||
<div className="form-group row">
|
||||
<div className={'form-group row type-' + this.props.type}>
|
||||
<label className="col-12 col-sm-3 col-form-label text-sm-right">{this.props.label}</label>
|
||||
<div className="col-12 col-sm-8 col-lg-4">
|
||||
{this.renderElement()}
|
||||
|
@ -42,6 +50,18 @@ class RbFormElement extends React.Component {
|
|||
renderElement() {
|
||||
return ('请复写此方法');
|
||||
}
|
||||
componentDidUpdate() {
|
||||
console.log('fire componentDidUpdate');
|
||||
if (parent && parent.rbModal) parent.rbModal.loaded()
|
||||
}
|
||||
getValue() {
|
||||
let v = $val(this.refs['field.value'])
|
||||
if (this.validate(v) == true) return v;
|
||||
else throw new Error('无效值:' + this.props.field);
|
||||
}
|
||||
validate(v) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
class RbFormText extends RbFormElement {
|
||||
|
@ -50,7 +70,7 @@ class RbFormText extends RbFormElement {
|
|||
}
|
||||
renderElement() {
|
||||
return (
|
||||
<input className="form-control form-control-sm" type="text" id={this.props.field} value={this.props.defaultValue} maxlength={this.props.maxLength || 200} />
|
||||
<input ref="field.value" className="form-control form-control-sm" type="text" id={this.props.field} value={this.props.defaultValue} maxlength={this.props.maxLength || 200} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -61,7 +81,7 @@ class RbFormTextarea extends RbFormElement {
|
|||
}
|
||||
renderElement() {
|
||||
return (
|
||||
<textarea class="form-control form-control-sm row2" id={this.props.field} maxlength={this.props.maxLength || 200}>{this.props.defaultValue}</textarea>
|
||||
<textarea ref="field.value" class="form-control form-control-sm row2" id={this.props.field} maxlength={this.props.maxLength || 200}>{this.props.defaultValue}</textarea>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -69,50 +89,96 @@ class RbFormTextarea extends RbFormElement {
|
|||
class RbFormImage extends RbFormElement {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state.imgs = [];
|
||||
this.state.imgsPath = [];
|
||||
}
|
||||
renderElement() {
|
||||
return (
|
||||
<div className="img-field">
|
||||
{this.state.imgs.map((item, index) => {
|
||||
return (<span><a class="img-thumbnail img-upload" ref="upload.handle"><img src={'http://rb-cdn.errorpage.cn/' + item}/></a></span>)
|
||||
{this.state.imgsPath.map((item, index) => {
|
||||
return (<span><a class="img-thumbnail img-upload"><img src={rb.storageUrl + item}/><b title="删除" onClick={()=>this.removeItem()}><span className="zmdi zmdi-delete"></span></b></a></span>)
|
||||
})}
|
||||
<span><a class="img-thumbnail img-upload" ref="upload.handle"><span className="zmdi zmdi-image-alt"></span></a></span>
|
||||
<input type="file" className="hide" ref="upload.input" />
|
||||
<span>
|
||||
<input type="file" className="inputfile" ref="upload.input" id={this.props.field + '-input'} />
|
||||
<label for={this.props.field + '-input'} className="img-thumbnail img-upload"><span className="zmdi zmdi-image-alt"></span></label>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
componentDidMount() {
|
||||
let that = this;
|
||||
$(this.refs['upload.handle']).click(function(){
|
||||
$(that.refs['upload.input'])[0].click();
|
||||
})
|
||||
$(that.refs['upload.input']).html5Uploader({
|
||||
name: that.props.field,
|
||||
postUrl: __baseUrl + '/filex/upload?cloud=true',
|
||||
postUrl: __baseUrl + '/filex/upload?cloud=auto',
|
||||
onClientLoad: function(e, file){
|
||||
},
|
||||
onSuccess:function(d){
|
||||
d = JSON.parse(d.currentTarget.response);
|
||||
if (d.error_code == 0){
|
||||
let imgs = that.state.imgs;
|
||||
imgs.push(d.data);
|
||||
console.log(imgs)
|
||||
that.setState({ imgs:imgs })
|
||||
let imgsPath = that.state.imgsPath;
|
||||
imgsPath.push(d.data);
|
||||
that.setState({ imgsPath:imgsPath })
|
||||
}
|
||||
else alert(d.error_msg || '上传失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
getValue() {
|
||||
return this.state.imgsPath.join(',');
|
||||
}
|
||||
removeItem(e) {
|
||||
}
|
||||
}
|
||||
|
||||
class RbFormFile extends RbFormElement {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state.filesPath = [];
|
||||
}
|
||||
renderElement() {
|
||||
return (
|
||||
<div className="file-field">
|
||||
{this.state.filesPath.map((item, index) => {
|
||||
return (<div className="img-thumbnail"><i className="zmdi zmdi-file"></i><span>{item}</span><b title="删除" onClick={()=>this.removeItem()}><span className="zmdi zmdi-delete"></span></b></div>)
|
||||
})}
|
||||
<div className="file-select">
|
||||
<input type="file" className="inputfile" ref="upload.input" id={this.props.field + '-input'} />
|
||||
<label for={this.props.field + '-input'} className="btn-secondary"><i className="zmdi zmdi-upload"></i><span>选择文件</span></label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
componentDidMount() {
|
||||
let that = this;
|
||||
$(that.refs['upload.input']).html5Uploader({
|
||||
name: that.props.field,
|
||||
postUrl: __baseUrl + '/filex/upload?cloud=auto',
|
||||
onClientLoad: function(e, file){
|
||||
},
|
||||
onSuccess:function(d){
|
||||
d = JSON.parse(d.currentTarget.response);
|
||||
if (d.error_code == 0){
|
||||
let filesPath = that.state.filesPath;
|
||||
filesPath.push(d.data);
|
||||
that.setState({ filesPath:filesPath })
|
||||
}
|
||||
else alert(d.error_msg || '上传失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
getValue() {
|
||||
return this.state.filesPath.join(',');
|
||||
}
|
||||
removeItem(e) {
|
||||
}
|
||||
}
|
||||
|
||||
const __h5upload = function(opt){
|
||||
};
|
||||
const __detectElement = function(item){
|
||||
if (item.type == 'TEXT'){
|
||||
return <RbFormText {...item} />
|
||||
} else if (item.type == 'IMAGE'){
|
||||
return <RbFormImage {...item} />
|
||||
} else if (item.type == 'FILE'){
|
||||
return <RbFormFile {...item} />
|
||||
} else {
|
||||
console.error('Unknow element : ' + JSON.stringify(item))
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue