优化后台UI，修复文件上传组件
This commit is contained in:
@@ -150,6 +150,7 @@ class Upload extends Base {
|
||||
$data['is_writable'] = $file->isWritable(); //是否可写
|
||||
$data['md5'] = md5_file($file->getPathname());
|
||||
$data['sha1'] = sha1_file($file->getPathname());
|
||||
$data['id'] = time();
|
||||
return $data;
|
||||
}
|
||||
}
|
||||
@@ -5,22 +5,17 @@
|
||||
{else/}
|
||||
<input type="hidden" name="{$name}" id="field_{$name}" value="">
|
||||
{/if}
|
||||
<div id="fileList_{$name}" class="upload-file-list-info" style="width:280px;">
|
||||
<div id="fileList_{$name}" class="img-list">
|
||||
{if $value}
|
||||
{php}
|
||||
$images = get_cover($value);
|
||||
{/php}
|
||||
<li class="affix-list-item" id="WU_FILE_0">
|
||||
<div class="upload-file-info">
|
||||
<span class="webuploader-pick-file-close" data-queued-id="WU_FILE_0" data-id="{$value}" data-fileurl="{$images['path']}"><i class="close"></i></span>
|
||||
<span class="fname"></span>
|
||||
<span class="fsize">上传时间:{$images['create_time']}</span>
|
||||
<div class="clearfix"></div>
|
||||
<div class="item" data-id="{$images['id']}">
|
||||
<div class="thumb">
|
||||
<div class="close"><i class="fa fa-close"></i></div>
|
||||
<img src="{$images['path']}" alt="{$images['create_time']}">
|
||||
</div>
|
||||
<div class="filebox image">
|
||||
<img src="{:config('config.base_url')}{$images['path']}" class="img-responsive">
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -586,9 +586,21 @@ define(['jquery', 'bootstrap', 'validator'], function ($, undefined, Validator)
|
||||
setFile: function(fileList, param){
|
||||
var file = $('#fileList_'+param.name);
|
||||
var field = $('#field_'+param.name);
|
||||
var html = '<div class="item"><div class="thumb"><div class="close"><i class="fa fa-close"></i></div><img src="#" /></div></div>';
|
||||
for(var i = 0; i < 10; i++){
|
||||
file.append(html);
|
||||
var value = field.val() ? field.val().split(",") : [];
|
||||
|
||||
if(param.limit == 1){
|
||||
var html = '<div class="item"><div class="thumb" data-id="'+fileList[0].id+'"><div class="close"><i class="fa fa-close"></i></div><img src="'+fileList[0].url+'" /></div></div>';
|
||||
file.html(html);
|
||||
field.val(fileList[0].id);
|
||||
}else{
|
||||
for(var i = 0; i < fileList.length; i++){
|
||||
if(!value.includes((fileList[i].id).toString())){
|
||||
var html = '<div class="item"><div class="thumb" data-id="'+fileList[i].id+'"><div class="close"><i class="fa fa-close"></i></div><img src="'+fileList[i].url+'" /></div></div>';
|
||||
value.push(fileList[i].id);
|
||||
file.append(html);
|
||||
}
|
||||
}
|
||||
field.val(value.join(','));
|
||||
}
|
||||
if(param.type == 'image'){
|
||||
Form.events.imageDel();
|
||||
|
||||
@@ -125,6 +125,7 @@ define(['jquery', 'bootstrap', 'webupload'], function ($, undefined, WebUploader
|
||||
switch( type ) {
|
||||
case 'uploadFinished':
|
||||
Upload.setState( 'confirm' );
|
||||
Upload.uploadFinished();
|
||||
break;
|
||||
case 'uploadSuccess':
|
||||
Upload.uploadSuccess(response, file);
|
||||
@@ -148,7 +149,6 @@ define(['jquery', 'bootstrap', 'webupload'], function ($, undefined, WebUploader
|
||||
if ( $(this).hasClass( 'disabled' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( state === 'ready' ) {
|
||||
uploader.upload();
|
||||
} else if ( state === 'paused' ) {
|
||||
@@ -285,25 +285,7 @@ define(['jquery', 'bootstrap', 'webupload'], function ($, undefined, WebUploader
|
||||
});
|
||||
} else {
|
||||
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
|
||||
// use jquery animate to rotation
|
||||
// $({
|
||||
// rotation: rotation
|
||||
// }).animate({
|
||||
// rotation: file.rotation
|
||||
// }, {
|
||||
// easing: 'linear',
|
||||
// step: function( now ) {
|
||||
// now = now * Math.PI / 180;
|
||||
|
||||
// var cos = Math.cos( now ),
|
||||
// sin = Math.sin( now );
|
||||
|
||||
// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
$li.appendTo( $queue );
|
||||
@@ -425,19 +407,40 @@ define(['jquery', 'bootstrap', 'webupload'], function ($, undefined, WebUploader
|
||||
},
|
||||
uploadSuccess: function(res, file){
|
||||
if (res.code == 1) {
|
||||
var query = sent.parseUrl(window.location.href);
|
||||
Upload.config.upList.push(res.info);
|
||||
if(Upload.config.upList.length > 0){
|
||||
parent.Form.api.setFile(Upload.config.upList, query);
|
||||
}else{
|
||||
sent.msg('未上传数据或上传失败！', 'error')
|
||||
}
|
||||
},
|
||||
uploadFinished: function(){
|
||||
var query = sent.parseUrl(window.location.href);
|
||||
if(Upload.config.upList.length > 0){
|
||||
if(query.limit == 1 && Upload.config.upList.length > 1){
|
||||
sent.msg('请单选图片或文件', 'error');
|
||||
return false;
|
||||
}
|
||||
parent.Form.api.setFile(Upload.config.upList, query);
|
||||
}else{
|
||||
sent.msg('未选择数据！', 'error')
|
||||
}
|
||||
},
|
||||
server: function(){
|
||||
var query = sent.parseUrl(window.location.href);
|
||||
if($('.img-list .item .thumb').length > 0){
|
||||
$('.img-list .item .thumb').on('click', function(){
|
||||
if($(this).hasClass('selected')){
|
||||
Upload.config.upList = Upload.config.upList.filter(item => !sent.utils.isObjEqual(item, $(this).data()));
|
||||
$(this).removeClass('selected');
|
||||
}else{
|
||||
Upload.config.upList.push($(this).data());
|
||||
$(this).addClass('selected');
|
||||
}
|
||||
})
|
||||
}
|
||||
$('button.btn-select').click(function(){
|
||||
var query = sent.parseUrl(window.location.href);
|
||||
if(Upload.config.upList.length > 0){
|
||||
if(query.limit == 1 && Upload.config.upList.length > 1){
|
||||
sent.msg('请单选图片或文件', 'error');
|
||||
return false;
|
||||
}
|
||||
parent.Form.api.setFile(Upload.config.upList, query);
|
||||
}else{
|
||||
sent.msg('未选择数据！', 'error')
|
||||
|
||||
@@ -225,6 +225,23 @@ define(['jquery', 'layer', 'message'], function ($, layer) {
|
||||
|
||||
}
|
||||
},
|
||||
utils: {
|
||||
//比较2个对象是否相同
|
||||
isObjEqual:function(o1,o2){
|
||||
var props1 = Object.getOwnPropertyNames(o1);
|
||||
var props2 = Object.getOwnPropertyNames(o2);
|
||||
if (props1.length != props2.length) {
|
||||
return false;
|
||||
}
|
||||
for (var i = 0,max = props1.length; i < max; i++) {
|
||||
var propName = props1[i];
|
||||
if (o1[propName] !== o2[propName]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
validatenull: function (val) {
|
||||
if (typeof val == 'boolean') {
|
||||
return false;
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
<tr>
|
||||
<th width="30"><input class="checkbox check-all" type="checkbox"></th>
|
||||
<th width="60">ID</th>
|
||||
<th width="280">标题</th>
|
||||
<th width="280">创建时间</th>
|
||||
<th width="280">更新时间</th>
|
||||
<th>标题</th>
|
||||
<th>创建时间</th>
|
||||
<th>更新时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
.img-list .item{width: 20%;}
|
||||
.img-list .item .thumb{margin: 5px; border: 1px solid #efefef; height: 120px; border-radius: 4px; position: relative; cursor: pointer; overflow: hidden;}
|
||||
.img-list .item .thumb img{width: 100%;}
|
||||
.img-list .item .close{position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; font-size: 10px; text-align: center; line-height: 20px; color: #000000; border-radius: 50%; background: #333333;}
|
||||
.img-list .item .selected .ok{position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 50px solid transparent; border-bottom: 50px solid #56b0fa;}
|
||||
.page{height: 45px;}
|
||||
.page .pagination{margin: 0;}
|
||||
</style>
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="img-list">
|
||||
{volist name="list" id="item"}
|
||||
<div class="item">
|
||||
<div class="thumb"><img src="{$item['url']}" /></div>
|
||||
<div class="thumb" data-id="{$item['id']}" data-url="{$item['url']}"><img src="{$item['url']}" /><div class="ok"></div></div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user