Kirin/resources/views/admin/image_manager/index.blade.php

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">{{$heading_title}} <span>{{request('directory','')}}</span> </h4>
    </div>
    <div class="modal-body">
		<div class="row">
			<p class="text-red col-sm-12">建议创建目录分类管理图片，避免图片因同名等问题被覆盖也方便后期管理维护</p>
		</div>
      <div class="row">
        <div class="col-sm-5">
        	<a href="<?php echo $data['parent']; ?>" data-toggle="tooltip" title="上级" id="button-parent" class="btn btn-default"><i class="fa fa-level-up"></i></a> 
        	<a href="<?php echo $data['refresh']; ?>" data-toggle="tooltip" title="刷新" id="button-refresh" class="btn btn-default"><i class="fa fa-refresh"></i></a>
          <button type="button" data-toggle="tooltip" title="上传" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i></button>
          <button type="button" data-toggle="tooltip" title="新建" id="button-folder" class="btn btn-default"><i class="fa fa-folder"></i></button>
          <button type="button" data-toggle="tooltip" title="删除" id="button-delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
          <!--<button type="button" data-toggle="tooltip" title="确定" id="button-check" class="btn btn-success"><i class="fa fa-check"></i></button>-->	
        </div>
        <div class="col-sm-7">
          <div class="input-group">
            <input class="form-control search-query" type="text" placeholder="搜索" value="{{request('filter_name','')}}"  name="search">
			<span class="input-group-btn">
				<button id="button-search" class="btn btn-primary btn-sm" type="button">
					<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
					搜索
				</button>
			</span>
          </div>
        </div>
      </div>
      <hr />
      <?php if(!empty($data['images'])){ ?>
		    	<?php foreach (array_chunk($data['images'], 4) as $image) { ?>
				      <div class="row">
				        <?php foreach ($image as $image) { ?>
				        <div class="col-sm-3 text-center">
				          <?php if ($image['type'] == 'directory') { ?>
				          <div class="text-center"><a href="<?php echo $image['href']; ?>" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i></a></div>
				          <label>
				            <input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
				            <?php echo $image['name']; ?></label>
				          <?php } ?>
				          <?php if ($image['type'] == 'image') { ?>
				          <a class="thumbnail"><img src="<?php echo path_compat( $image['thumb']); ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a>
				          <label>
				            <input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
				            <?php echo $image['name']; ?></label>
				          <?php } ?>
				        </div>
				        <?php } ?>
				      </div>
			      	<br />
			     <?php } ?>
	     <?php } ?>
    </div>
    
    <div class="modal-footer"><?php echo $data['pagination']; ?></div>
     
  </div>
</div>
<script type="text/javascript">

<?php if ($data['target']) { ?>
$('a.thumbnail').on('click', function(e) {
	e.preventDefault();

	<?php if ($data['thumb']) { ?>
	$("#<?php echo $data['thumb']; ?>").find('img').attr('src', $(this).find('img').attr('src'));
	<?php } ?>

	$("#<?php echo $data['target']; ?>").attr('value', $(this).parent().find('input').attr('value'));

	$('#modal-image').modal('hide');
});
<?php } ?>

$('a.directory').on('click', function(e) {
	e.preventDefault();

	$('#modal-image').load($(this).attr('href'));
});
$('.pagination a').on('click', function(e) {
	e.preventDefault();

	$('#modal-image').load($(this).attr('href'));
});
$('#button-parent').on('click', function(e) {
	e.preventDefault();

	$('#modal-image').load($(this).attr('href'));
});

$('#button-refresh').on('click', function(e) {
	e.preventDefault();

	$('#modal-image').load($(this).attr('href'));
});

$('input[name=\'search\']').on('keydown', function(e) {
	if (e.which == 13) {
		$('#button-search').trigger('click');
	}
});

$('#button-search').on('click', function(e) {
	
	var url = "{{$data['search_url']}}";

	var filter_name = $('input[name=\'search\']').val();

	if (filter_name) {
		url += '&filter_name=' + encodeURIComponent(filter_name);
	}

	<?php if (request('thumb')) { ?>
	url += '&thumb=' + "<?php echo request('thumb'); ?>";
	<?php } ?>

	<?php if (request('target')) { ?>
	url += '&target=' + "<?php echo request('target'); ?>";
	<?php } ?>

	$('#modal-image').load(url);
});


$('#button-upload').on('click', function() {
	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input id="upload_img" multiple="multiple" type="file" name="file[]" value="" /></form>');

	$('#upload_img').trigger('click');

	if (typeof timer != 'undefined') {
    	clearInterval(timer);
	}

	timer = setInterval(function() {
		if ($('#upload_img').val() != '') {
			clearInterval(timer);

			$.ajax({
				url: "<?php echo $data['upload_url']; ?>",
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
					$('#button-upload').prop('disabled', true);
				},
				complete: function() {
					$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
					$('#button-upload').prop('disabled', false);
				},
				success: function(json) {
					if (json['error']) {						
						art.dialog({content:json['error'],lock: true,});
					}

					if (json['success']) {						
						art.dialog({content:json['success'],lock: true,});
						$('#button-refresh').trigger('click');
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					art.dialog({content:thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText,lock: true,});	
				}
			});
		}
	}, 500);
});


$('#button-folder').popover({
	html: true,
	placement: 'bottom',
	trigger: 'click',
	title: '新建文件夹',
	content: function() {
		html  = '<div class="input-group">';
		html += '  <input type="text" name="folder" value="" placeholder="文件夹名称" class="form-control">';
		html += '  <span class="input-group-btn"><button type="button" title="新建文件夹" id="button-create" class="btn btn-primary btn-sm""><i class="fa fa-plus-circle"></i></button></span>';
		html += '</div>';

		return html;
	}
});

$('#button-folder').on('shown.bs.popover', function() {
	$('#button-create').on('click', function() {
		$.ajax({
			url:"<?php echo $data['folder_url']; ?>",
			type: 'post',
			dataType: 'json',
			data: 'folder=' + encodeURIComponent($('input[name=\'folder\']').val()),
			beforeSend: function() {
				$('#button-create').prop('disabled', true);
			},
			complete: function() {
				$('#button-create').prop('disabled', false);
			},
			success: function(json) {
				if (json['error']) {
					art.dialog({content:json['error'],lock: true,});
				}

				if (json['success']) {
					art.dialog({content:json['success'],lock: true,});

					$('#button-refresh').trigger('click');
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {			
				art.dialog({content:thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText,lock: true,});
			}
		});
	});
});

$('#modal-image #button-delete').on('click', function(e) {

		art.dialog({				
			    content: '是否要删除',
			    lock: true,	
			    ok: function () {	 		
				 	  $.ajax({
						url: "<?php echo $data['delete_url']; ?>",
						type: 'post',
						dataType: 'json',
						data: $('input[name^=\'path\']:checked'),
						beforeSend: function() {
							$('#button-delete').prop('disabled', true);
						},
						complete: function() {
							$('#button-delete').prop('disabled', false);
						},
						success: function(json) {
							if (json['error']) {
								art.dialog({content:json['error'],lock: true,});
							}

							if (json['success']) {
								art.dialog({content:json['success'],lock: true,});

								$('#button-refresh').trigger('click');
							}
						},
						error: function(xhr, ajaxOptions, thrownError) {
							art.dialog({content:thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText,lock: true,});
						}
					});
				}
		});
		
		// input.each(function(i){
		
		// 	var cur_img=$(this).parent().parent().find('img').attr('src');
			
		// 	var cur_input=$(this).val();
			
		// 	$(target[i]).find('img').attr('src',cur_img);
		// 	$(target[i]).find('input').attr('value',cur_input);			
		// });
		
		// $('#modal-image').modal('hide');
});
</script>