<div class="row">
	<!-- left column -->
	<div class="col-md-12">
	  <!-- general form elements -->
	  <div class="box box-primary">
		<div class="box-header with-border">
		  <h3 class="box-title"><?php echo $form_title;?></h3>
		</div>
		<!-- /.box-header -->
		<!-- form start -->
		<form class="form-horizontal" autocomplete="off" enctype="multipart/form-data" name="project_banners" id="project_banners"  action="<?php echo base_url(); ?>admin/banners/image_save/<?php 
            if (!empty($project_banner_info)) {
                echo $project_banner_info['id'];
            }
            ?>" method="post">
			<div class="box-body">
				<div class="form-group">
					<label for="exampleInputFile" class="col-sm-2 control-label">Upload Image</label>
					<div class="col-sm-10">
						<input type="file" name="images" id="images" multiple="multiple">
						<p class="help-block">You can upload image</p>
						<span id="thumbnail_error"></span>
					</div>
                </div>
				<?php
				if (!empty($project_banner_info) && !empty($project_banner_info['name'])){ ?>
					<div class="col-sm-10 col-sm-offset-2">
						<div class="panel panel-default">
							<div class="panel-body">
								<img src="<?php echo base_url(); ?>uploads/banners/<?php echo $project_banner_info['name']; ?>" width="100px" alt="<?php echo $project_banner_info['name'] ; ?>" title="<?php echo $project_banner_info['name'] ; ?>">
							</div>
						</div>
					</div>
				<?php } ?>
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<button type="submit" class="btn btn-info pull-right">Update</button>
			</div>
			<!-- /.box-footer -->
		</form>
	  </div>
    </div>
</div>
<script>
$(document).ready(function(){

	$(document).on("submit","#project_banners",function(){
		  
		var dRegExp = /^[A-z0-9 ]+$/;
		var thumbnail_error = false;

		var thumbnail = $('#images').val();
		var project_banner_id = "<?php echo $project_banner_info['id'];?>";

		var ext = thumbnail.substring(thumbnail.lastIndexOf('.') + 1);
		var extension = ext.toUpperCase();

		if(thumbnail=="") {
		    $('#thumbnail_error').show().html('Please upload image');
		    thumbnail_error = true;
		}else if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
		    $('#thumbnail_error').show().html('Please upload valid images');
		    thumbnail_error = true;
		}else{
		    $('#thumbnail_error').show().html('');
		    thumbnail_error = false;
		}

		if(!thumbnail_error ){
		  return true;
		}else{
		  return false;
		}

		});
});
</script>