template_upload.php | searchcode

/application/views/template_upload.php

https://bitbucket.org/inflex13/inkedgirls
PHP | 237 lines | 188 code | 37 blank | 12 comment | 24 complexity | 6c01a5d5eca1f57e56daf7c0f8a02c05 MD5 | raw file

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title><?php echo $this->template->title->default($this->config->item('title')); ?></title>
	<meta charset="utf-8">
	<meta name="description" content="<?php echo $this->template->description; ?>">
	<meta name="author" content="">
	<?php echo $this->template->meta; ?>
	<link rel="shortcut icon" href="<?php echo base_url('/style/images/favicon.png'); ?>"/>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/style.css'); ?>" media="all" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/type/museo.css'); ?>" media="all" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/color/custom.css'); ?>" media="all" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/js/fancybox/jquery.fancybox.css?v=2.0.4'); ?>" media="all" />
	<?php echo $this->template->stylesheet; ?>
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/css/ie7.css'); ?>" media="all" />
	<![endif]-->
	<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/css/ie8.css'); ?>" media="all" />
	<![endif]-->
	<!--[if IE 9]>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('/style/css/ie9.css'); ?>" media="all" />
	<![endif]-->
</head>
<body>
<!-- Begin Wrapper -->
<div style="position:relative;margin: 0px auto;width: 1000px;">
	<!-- Logo -->
	<a style="float: left;" href="<?php echo base_url(); ?>">
		<img height="70" src="<?php echo base_url('/style/images/ig-logo2.png'); ?>" alt="" />
	</a>
	<!-- Facebook -->
	<?php echo $this->template->facebook; ?>
	
	<div style="clear: both"></div>
<div id="wrapper" style="margin: 0px auto;">
  <!-- Begin Menu -->
  <div id="menu" class="menu">
   <?php echo $this->template->menu; ?>
	<br style="clear: left" />
  </div>
  <!-- End Menu -->


<div id="container">
  <div id="full-width">

  	<!-- Top Girls -->
  	<?php echo $this->template->top_girls; ?>

  	<!-- Begin Content -->
  	<?php echo $this->template->content; ?>
  	<!-- End Content -->

  </div>
  </div>
  <div class="clear"></div>
 <!-- Begin Footer -->
	<?php echo $this->template->footer; ?>
 <!-- End Footer --> 

</div>
<!-- End Container -->
</div>
<!-- End Wrapper -->

<!-- Global JS -->
<?php echo $this->template->footer_javascript; ?>

<!-- Page Specific JS -->
<?php echo $this->template->javascript; ?>
<script>
/*
 * Required features:
 * 		addEventListener (Google Chrome 1+, FF 1+, IE 9+, Opera 7+, Safari 1+)
 * 		FileReader (Google Chrome 7+, FF 3.6+, IE 10+)
 *		FormData (Google Chrome 7+, FF 4+, Safari 5+)
 */
 $(document).ready(function(){
	if(("addEventListener" in window) && ("FileReader" in window) && ("FormData" in window))
	{
		var formdata   = new FormData();
		var totalfiles = 1;
		var file_info  = new Array();
		
		$("#upload-link").live('click', function(e){
			e.preventDefault();

			if($("#upload").length != 0){
				
				//clear previous data
				$('#list').html('');
				formdata   = new FormData();
				totalfiles = 0;
				file_info  = new Array();
				$('#confirm').remove();
				$('#clear').remove();

				//emulate upload click
				$("#upload").click();

			}
			return false;
		});
		
		$("#upload").live('change', function(){
			var inputfield = $(this);
			var img, reader, file;

			file = this.files;
			file = file[0];

			var file_size = file.size;
			var file_name = file.name;

			console.log(file_size);
			if(file.type.match(/image.jpeg/))
			{
				file_info[totalfiles] = {'name':file_name, 'size':file_size};
				if(window.FileReader)
				{
					reader = new FileReader();
					reader.onloadend = function(e) {
						createImage(e.target.result);
					};
					reader.readAsDataURL(file);
				}
				
				if(formdata)
				{
					formdata.append("fb_uid", $('input[name=fb_uid]').attr('value'));
					//formdata.append("image_id", $('input[name=image_id]').attr('value'));
					//formdata.append("categorie_id", $('input[name=categorie_id]').attr('value'));
					//formdata.append("image_name", $('input[name=nom_fichier]').attr('value'));
					formdata.append("images", file);
				}
			}
		
			
			if($('#confirm').length == 0)
			{
				$(inputfield).parent().append("<input type='button' value='Upload' id='confirm' />");
			}
			
			if($('#clear').length == 0)
			{
				$(inputfield).parent().append("<input type='button' value='Clear' id='clear' />");
			}
		});
		
		$('#clear').live('click', function(){
			$('#list').html('');
			formdata = new FormData();
			totalfiles = 0;
			file_info = new Array();
			$('#confirm').remove();
			$('#clear').remove();
		});
		
		function createImage(source) {
			var the_size = (Math.round( (file_info[totalfiles].size * 100) / (1024 * 1024) ) / 100);
			$('#list').append('<div><img class="thumbnail" src='+source+' /><h2>'+file_info[totalfiles].name+'</h2></div>');
			totalfiles++;
		}
		
		function progressBar(percentage) {
			$('#progress_bar').addClass('loading');

			if($('#progress_bar').css('display') == 'none')
			{
				$('#progress_bar').slideDown('fast', function(){
					$('.percent').attr('data-percentage', percentage + "%");
					$('.percent').css({'width': (((percentage * $('#progress_bar').outerWidth()) / 100) - 2) + 'px', 'display':'block'});
				});
			}
			else
			{
				$('.percent').attr('data-percentage', percentage + "%");
				$('.percent').css({'width': (((percentage * $('#progress_bar').outerWidth()) / 100) - 2) + 'px', 'display':'block'});
				if(percentage == 100)
				{
					setTimeout(function(){
						$('#progress_bar').slideUp('slow', function(){
							$('.percent').css({'display':'none', 'width':'0px'});
							$('#progress_bar').removeClass('loading');
						});
					}, 1000);
				}
			}
		}
		
		$('#confirm').live('click', function(){
			
			console.log('Confirm clicked');
			var xhr = new XMLHttpRequest();
			
			function progressListener (e) {
				if (e.lengthComputable) {
					var percentage = Math.round((e.loaded * 100) / e.total);
					progressBar(percentage);
				}
			};
		
			function finishUpload (e) {
				progressBar(100);
			};
		
			xhr.upload.addEventListener("progress", progressListener, false);
		
			xhr.upload.addEventListener("load", finishUpload, false);
		
			xhr.open("POST", "framework/controllers/upload.php");
		
		    xhr.onreadystatechange = function(){
		    	console.info("readyState: ", this.readyState);
		    	if (this.readyState == 4) {
		      		if ((this.status >= 200 && this.status < 300) || this.status == 304) {
		        		if (this.responseText != "") {
		        			$('#return').show();
		        			$('#list').empty();
		        			$('#confirm').remove();
		        			$('#clear').remove();

		        			//html(this.responseText);
						}
					}
				}
			};
		
			xhr.send(formdata);
		});
	}
});
</script>

</body>
</html>