优化后台UI，修复文件上传组件

app/controller/Upload.php

@@ -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;
 	}
 }

app/http/form/template/images.html

@@ -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="item" data-id="{$images['id']}">
-			<div class="upload-file-info">
+			<div class="thumb">
-				<span class="webuploader-pick-file-close" data-queued-id="WU_FILE_0" data-id="{$value}" data-fileurl="{$images['path']}"><i class="close"></i></span>
+				<div class="close"><i class="fa fa-close"></i></div>
-				<span class="fname"></span>
+				<img src="{$images['path']}" alt="{$images['create_time']}">
-				<span class="fsize">上传时间:{$images['create_time']}</span>
-				<div class="clearfix"></div>
 			</div>
-			<div class="filebox image">
+		</div>
-				<img src="{:config('config.base_url')}{$images['path']}" class="img-responsive">
-			</div>
-		</li>
 		{/if}
 	</div>
 </div>

public/static/common/js/require-form.js

@@ -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>';
+				var value = field.val() ? field.val().split(",") : [];
-				for(var i = 0; i < 10; i++){
+
-					file.append(html);
+				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();

public/static/common/js/require-upload.js

@@ -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{
+		uploadFinished: function(){
-					sent.msg('未上传数据或上传失败！', 'error')
+			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')

public/static/common/js/sent.js

@@ -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;

view/admin/ad/lists.html

@@ -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>标题</th>
-						<th width="280">创建时间</th>
+						<th>创建时间</th>
-						<th width="280">更新时间</th>
+						<th>更新时间</th>
 						<th>操作</th>
 					</tr>
 				</thead>

view/upload/server.html

@@ -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>