<head>
  <meta charset="utf-8">
  <title>Html5 local file api tut</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css" rel="stylesheet" />
</head>



<div class="container">

	<div class="row" >
    <!--фото демо-->
		<div class="large-12 columns"  >

				<h1>Load A Photo</h1>
				<input type="file" id="the-photo-file-field">
				<div id="preview" >
          <!--зображення буде вставлено сюди-->
				</div>
				<div id="data" class="large-8 columns">
					<h2 id="name"></h2>
					<p id="size"></p>
					<p id="type"></p>
				</div>
		</div>
    
    <!--відео демо-->
    <div class="large-12 columns">
      <h1>Load An mp4 file</h1>
      <input type="file" id="the-video-file-field">
				<div id="data-vid" class="large-8 columns">
            <!--відео буде вставлено тут-->
				</div>
           <h2 id="name-vid"></h2>
				 <p id="size-vid"></p>
				 <p id="type-vid"></p>
    </div>

	</div>
		
</div>

	

	</div>

<!--
html5 відео
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
-->
//визначаємо чи підтримує браузер file api і можливості filereader
if (window.File && window.FileReader && window.FileList && window.Blob) {
	//http://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable
	function humanFileSize(bytes, si) {
	    var thresh = si ? 1000 : 1024;
	    if(bytes < thresh) return bytes + ' B';
	    var units = si ? ['kB','MB','GB','TB','PB','EB','ZB','YB'] : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
	    var u = -1;
	    do {
	        bytes /= thresh;
	        ++u;
	    } while(bytes >= thresh);
	    return bytes.toFixed(1)+' '+units[u];
	}


  //ця функція викликається, коли вхідне зображення завантажується
	function renderImage(file){
		var reader = new FileReader();
		reader.onload = function(event){
			the_url = event.target.result
      //звичайно, використовувати бібліотеку шаблонів, таку як handlebars.js, це краще рішення, ніж просто вставляти рядок
			$('#preview').html("<img src='"+the_url+"' />")
			$('#name').html(file.name)
			$('#size').html(humanFileSize(file.size, "MB"))
			$('#type').html(file.type)
		}
    
    //коли файл читається, вище спрацьовує подія onload
		reader.readAsDataURL(file);
	}

  
  //ця функція викликається, коли input завантажує відео
	function renderVideo(file){
		var reader = new FileReader();
		reader.onload = function(event){
			the_url = event.target.result
      //звичайно, використовувати бібліотеку шаблонів, таку як handlebars.js, це краще рішення, ніж просто вставляти рядок
      $('#data-vid').html("<video width='400' controls><source id='vid-source' src='"+the_url+"' type='video/mp4'></video>")
       $('#name-vid').html(file.name)
			$('#size-vid').html(humanFileSize(file.size, "MB"))
			$('#type-vid').html(file.type)

		}
    
    //коли файл читається, вище спрацьовує подія onload
		reader.readAsDataURL(file);
	}

  

  //відсліжуємо зміни
	$( "#the-photo-file-field" ).change(function() {
		console.log("photo file has been chosen")
		//отримуємо перше зображення з fileList
		//у цьому прикладі ми завантажуємо тільки один файл
		console.log(this.files[0].size)
		renderImage(this.files[0])

	});
  
	$( "#the-video-file-field" ).change(function() {
		console.log("video file has been chosen")
		//отримуємо перше зображення з fileList
		//у цьому прикладі ми завантажуємо тільки один файл
		console.log(this.files[0].size)
		renderVideo(this.files[0])

	});

} else {

  alert('File API підтримується в цьому браузері тільки частково');

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.